发表新帖
发表新帖

How to auto shrink iframe height dynamically?

后端 未结
关注
3 1614
慢半拍i
慢半拍i 2020-12-17 06:09

I use the following code to achieve dynamic iframe height:

In the :
相关标签:
3条回答
  • 南旧
    2020-12-17 06:16

    Problem Solved

    I was digging in the internet and I found a code solved the whole problem for me. I would like to share it so anyone can use it in order to get dynamic iframe height.

    First, put the following code between the <head> tags:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(myiframeid) {
var ifrm = document.getElementById(myiframeid);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>
<script>(function(run){
for (i=0;i<frames.length; i++) {
var f1 = document.getElementsByTagName('myiframename')[i];
if(!f1 && window.addEventListener && !run){
document.addEventListener('DOMContentLoaded', arguments.callee, false);
return;
}
if(!f1){setTimeout(arguments.callee, 300); return;}
f2 = f1.cloneNode(false);
f1.src = 'about: blank';
f2.frameBorder = '0';
f2.allowTransparency = 'yes';
f2.scrolling = 'no';
f1.parentNode.replaceChild(f2, f1);
}
})();
</script>

    Second, the Iframe code in the <body> :

    <iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>

    Third and Last, the CSS:

    #myiframeid{
width: 100%;
}

    Note: You should have Name and ID for the Iframe.

    Compatible with all browsers (Chrome, Firefox, IE).

    Have a good day!

    0 讨论(0)
  • 攒了一身酷
    2020-12-17 06:25

    I thought about it quite a bit, and think I came up with another solution that may resolve your problem from the parent document. Rather than editing the documents in your iframe. However I can't test it due to cross origin policy. Try this out and let me know how it works.

    var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
    docHeight = $(iframeDoc).height();
    $('iframe[name="dservers"]').height( docHeight );
});

    Hope this does it for you.

    Edit: This fix would require you to remove the onload="" function.

    Edit-2: You seem to have combined the two scripts. You have this:

      function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
    docHeight = $(iframeDoc).height();
    $('iframe[name="dservers"]').height( docHeight );
});
  }

    Replace that entire script with this:

    $(function(){
    var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
    $('iframe[name="dservers"]').load(function(){
        docHeight = $(iframeDoc).height();
        $('iframe[name="dservers"]').height( docHeight );
    });
});

    And remove the onload="resizeFrame()" from the iframes tag.

    0 讨论(0)
  • 日久生厌
    2020-12-17 06:27

    I wrote a little library that deals with all these issues and keeps the iframed sized when the content changes or the browser window is resized.

    https://github.com/davidjbradshaw/iframe-resizer

    0 讨论(0)
 看不清?
提交回复
热议问题