Adjust width and height of iframe to fit with content in it

前端 未结 30 2330
旧时难觅i
旧时难觅i 2020-11-22 02:09

I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that t

相关标签:
30条回答
  • 2020-11-22 02:52

    I found this resizer to work better:

    function resizer(id)
    {
    
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body;
        var html_ = doc.documentElement;
    
        var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
        var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
    
        document.getElementById(id).height = height;
        document.getElementById(id).width = width;
    
    }
    

    Note the style object is removed.

    0 讨论(0)
  • 2020-11-22 02:53

    If the content is just a very simple html, the simplest way is to remove the iframe with javascript

    HTML code:

    <div class="iframe">
        <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
    </div>
    

    Javascript code:

    function removeIframe(obj) {
        var iframeDocument = obj.contentDocument || obj.contentWindow.document;
        var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
        obj.remove();
        document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
    }
    
    0 讨论(0)
  • 2020-11-22 02:55

    all can not work using above methods.

    javascript:

    function resizer(id) {
            var doc = document.getElementById(id).contentWindow.document;
            var body_ = doc.body, html_ = doc.documentElement;
    
            var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
            var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);
    
            document.getElementById(id).style.height = height;
            document.getElementById(id).style.width = width;
    
        }
    

    html:

    <div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
             <input id="txtHeight"/>height     <input id="txtWidth"/>width     
            <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
            <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
            <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
    </div>
    

    Env: IE 10, Windows 7 x64

    0 讨论(0)
  • 2020-11-22 02:56

    Here is a cross-browser solution if you don't want to use jQuery:

    /**
     * Resizes the given iFrame width so it fits its content
     * @param e The iframe to resize
     */
    function resizeIframeWidth(e){
        // Set width of iframe according to its content
        if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
            e.width = e.contentWindow.document.body.scrollWidth;
        else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
            e.width = e.contentDocument.body.scrollWidth + 35;
        else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
            e.width = e.contentDocument.body.offsetWidth + 35;
    }
    
    0 讨论(0)
  • 2020-11-22 02:57

    Clearly there are lots of scenarios, however, I had same domain for document and iframe and I was able to tack this on to the end of my iframe content:

    var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
    parentContainer.style.height = document.body.scrollHeight + 50 + 'px';
    

    This 'finds' the parent container and then sets the length adding on a fudge factor of 50 pixels to remove the scroll bar.

    There is nothing there to 'observe' the document height changing, this I did not need for my use case. In my answer I do bring a means of referencing the parent container without using ids baked into the parent/iframe content.

    0 讨论(0)
  • 2020-11-22 02:57

    Simplicity :

    var iframe = $("#myframe");
    $(iframe.get(0).contentWindow).on("resize", function(){
        iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
        iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
    });
    
    0 讨论(0)
提交回复
热议问题