Machen iframe automatisch Höhe entsprechend dem Inhalt ohne Scrollbar anpassen?

Question

Zum Beispiel:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

Ich möchte, dass es seine Höhe entsprechend dem Inhalt anpassen kann, ohne dass ein Bildlauf erforderlich ist.

Answer 1

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

fügen Sie dies zu Ihrem iframe hinzu: onload="autoResize('youriframeid')"

Answer 2

jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>

Answer 3

Ich habe es mit AngularJS gemacht. Angular hat keine ng-load, aber ein 3rd-Party-Modul wurde gemacht; installieren Sie mit bower unten, oder finden Sie es hier: https://github.com/andrefarzat/ng-load

Holen Sie sich die ngLoad-Anweisung: bower install ng-load --save

Richten Sie Ihren iframe ein:

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

Controller-Funktion resizeIframe:

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};

Answer 4

Ich wollte eine iframe sich wie eine normale Seite verhalten (ich musste ein Vollbildbanner innerhalb einer iframe Element), also hier ist mein Skript:

    (function (window, undefined) {

    var frame,
        lastKnownFrameHeight = 0,
        maxFrameLoadedTries = 5,
        maxResizeCheckTries = 20;

    //Resize iframe on window resize
    addEvent(window, 'resize', resizeFrame);

    var iframeCheckInterval = window.setInterval(function () {
        maxFrameLoadedTries--;
        var frames = document.getElementsByTagName('iframe');
        if (maxFrameLoadedTries == 0 || frames.length) {
            clearInterval(iframeCheckInterval);
            frame = frames[0];
            addEvent(frame, 'load', resizeFrame);
            var resizeCheckInterval = setInterval(function () {
                resizeFrame();
                maxResizeCheckTries--;
                if (maxResizeCheckTries == 0) {
                    clearInterval(resizeCheckInterval);
                }
            }, 1000);
            resizeFrame();
        }
    }, 500);

    function resizeFrame() {
        if (frame) {
            var frameHeight = frame.contentWindow.document.body.scrollHeight;
            if (frameHeight !== lastKnownFrameHeight) {
                lastKnownFrameHeight = frameHeight;

                var viewportWidth = document.documentElement.clientWidth;
                if (document.compatMode && document.compatMode === 'BackCompat') {
                    viewportWidth = document.body.clientWidth;
                }

                frame.setAttribute('width', viewportWidth);
                frame.setAttribute('height', lastKnownFrameHeight);

                frame.style.width = viewportWidth + 'px';
                frame.style.height = frameHeight + 'px';
            }
        }
    }

    //--------------------------------------------------------------
    //  Cross-browser helpers
    //--------------------------------------------------------------

    function addEvent(elem, event, fn) {
        if (elem.addEventListener) {
            elem.addEventListener(event, fn, false);
        } else {
            elem.attachEvent("on" + event, function () {
                return (fn.call(elem, window.event));
            });
        }
    }

})(window);

Die Funktionen sind selbsterklärend und haben Kommentare, die ihren Zweck näher erläutern.

Answer 5

Ich habe Probleme in der Vergangenheit Aufruf iframe.onload für dynamisch erstellte iframes hatte, so ging ich mit diesem Ansatz für die Einstellung der iframe Größe:

iFrame-Ansicht

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

Hauptansicht

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

(dies funktioniert nur, wenn sich beide Ansichten in demselben Bereich befinden)