it-swarm.com.de

Ändern Sie die Größe der iframe entsprechend der Inhaltshöhe

Ich öffne meine Blogseite auf meiner Website. Das Problem ist, dass ich einem iframe eine Breite zuweisen kann, aber die Höhe sollte dynamisch sein, damit im iframe keine Bildlaufleiste angezeigt wird und es wie eine einzelne Seite aussieht ...

Ich habe verschiedenen JavaScript-Code zum Berechnen der Höhe des Inhalts ausprobiert, aber alle geben einen access denied-Berechtigungsfehler aus und sind nicht nützlich.

<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe>

Können wir Ajax verwenden, um die Höhe zu berechnen, oder vielleicht mit PHP?

68
chinmay

So beantworten Sie Ihre beiden Unterfragen direkt: Nein, Sie können dies weder mit Ajax noch mit PHP berechnen.

Was ich in der Vergangenheit getan habe, ist ein Auslöser von der iframe-Seite in window.onload (NICHT domready, da das Laden von Bildern eine Weile dauern kann), um die Seitenhöhe an die übergeordnete Komponente zu übergeben.

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

Dann sieht der parent.resizeIframe so aus:

function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Et voila, Sie haben einen robusten Resizer, der ausgelöst wird, sobald die Seite vollständig gerendert ist, ohne contentdocument vs contentWindow fiddling :)

Sicher, jetzt wird der iframe zuerst in der voreingestellten Höhe angezeigt. Dies kann jedoch leicht behoben werden, indem der iframe zuerst ausgeblendet wird und nur ein Bild zum Laden angezeigt wird. Wenn dann die resizeIframe-Funktion aktiviert ist, fügen Sie dort zwei zusätzliche Zeilen ein, die das Ladebild ausblenden, und zeigen den iframe für diesen falschen Ajax-Look an.

Natürlich funktioniert dies nur von derselben Domäne. Daher sollten Sie ein Proxy-Skript PHP verwenden, um dieses Zeug einzubetten. Wenn Sie erst einmal dort sind, können Sie auch einfach den RSS-Feed Ihres Blogs direkt in Ihre Website einbetten mit PHP.

60
SchizoDuckie

Sie können dies mit JavaScript tun.

document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px";
8
Anders S

Das Anpassen von IFRAME-Inhalten ist eine einfache Sache für in Google finden . Hier ist eine Lösung :

<script type="text/javascript">
    function autoIframe(frameId) {
       try {
          frame = document.getElementById(frameId);
          innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
          objToResize = (frame.style) ? frame.style : frame;
          objToResize.height = innerDoc.body.scrollHeight + 10;
       }
       catch(err) {
          window.status = err.message;
       }
    }
</script>

Dies löst natürlich nicht das domänenübergreifende Problem, das Sie haben ... Die Einstellung von document.domain kann hilfreich sein, wenn sich diese Websites am selben Ort befinden. Ich glaube nicht, dass es eine Lösung gibt, wenn Sie zufällige Websites aufrufen.

4
Scott Evernden

Hier ist meine Lösung für das Problem mit MooTools, das in Firefox 3.6, Safari 4.0.4 und Internet Explorer 7 funktioniert: 

var iframe_container = $('iframe_container_id');
var iframe_style = {
    height: 300,
    width: '100%'
};
if (!Browser.Engine.trident) {
    // IE has hasLayout issues if iframe display is none, so don't use the loading class
    iframe_container.addClass('loading');
    iframe_style.display = 'none';
}
this.iframe = new IFrame({
    frameBorder: 0,
    src: "http://www.youriframeurl.com/",
    styles: iframe_style,
    events: {
        'load': function() {
            var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
            var h = this.measure(function(){
                return innerDoc.body.scrollHeight;
            });            
            this.setStyles({
                height: h.toInt(),
                display: 'block'
            });
            if (!Browser.Engine.trident) {
                iframe_container.removeClass('loading');
            }
        }
    }
}).inject(iframe_container);

Gestalten Sie die Klasse "loading" so, dass eine Ajax-Ladegrafik in der Mitte des Iframe-Containers angezeigt wird. Bei anderen Browsern als Internet Explorer wird dann nach dem vollständigen Laden des Inhalts der IFRAME in voller Höhe angezeigt, und die Ladegrafik wird entfernt.

2
Truman Leung

Der Trick besteht darin, alle erforderlichen iframe-Ereignisse von einem externen Skript abzurufen. Beispielsweise haben Sie ein Skript, das den iFrame mithilfe von document.createElement erstellt. In diesem Skript haben Sie vorübergehend Zugriff auf den Inhalt des iFrame.

var dFrame = document.createElement("iframe");
dFrame.src = "http://www.example.com";
// Acquire onload and resize the iframe
dFrame.onload = function()
{
    // Setting the content window's resize function tells us when we've changed the height of the internal document
    // It also only needs to do what onload does, so just have it call onload
    dFrame.contentWindow.onresize = function() { dFrame.onload() };
    dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px";
}
window.onresize = function() {
    dFrame.onload();
}

Dies funktioniert, da sich dFrame in diesen Funktionen im Gültigkeitsbereich befindet, sodass Sie innerhalb des Rahmens auf das externe iFrame-Element zugreifen können, sodass Sie die tatsächliche Dokumenthöhe anzeigen und bei Bedarf erweitern können. Dieses Beispiel funktioniert in Firefox, aber nirgendwo sonst; Ich könnte dir die Problemumgehungen geben, aber du kannst den Rest herausfinden;)

0

Ich habe gerade den größten Teil von 3 Tagen damit verbracht, damit zu ringen. Ich arbeite an einer Anwendung, die andere Anwendungen in sich lädt, während eine feste Kopfzeile und eine feste Fußzeile beibehalten werden. Hier ist was ich mir ausgedacht habe. (Ich habe auch EasyXDM mit Erfolg verwendet, habe es jedoch später herausgezogen, um diese Lösung zu verwenden.)

Stellen Sie sicher, dass Sie diesen Code ausführen, nachdem der <iframe> im DOM vorhanden ist. Fügen Sie es in die Seite ein, die den iframe (das übergeordnete Element) zieht.

// get the iframe
var theFrame = $("#myIframe");
// set its height to the height of the window minus the combined height of fixed header and footer
theFrame.height(Number($(window).height()) - 80);

function resizeIframe() {
    theFrame.height(Number($(window).height()) - 80);
}

// setup a resize method to fire off resizeIframe.
// use timeout to filter out unnecessary firing.
var TO = false;
$(window).resize(function() {
    if (TO !== false) clearTimeout(TO);
    TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds
});
0
Stone

Unten ist mein onload Eventhandler.

Ich benutze ein IFRAME innerhalb eines jQuery UI Dialogs. Für verschiedene Verwendungen sind einige Anpassungen erforderlich .. Dies scheint für mich (vorerst) in Internet Explorer 8 und Firefox 3.5 zu funktionieren.

    function onLoadDialog(frame) {
    try {
        var body = frame.contentDocument.body;
        var $body = $(body);
        var $frame = $(frame);
        var contentDiv = frame.parentNode;
        var $contentDiv = $(contentDiv);

        var savedShow = $contentDiv.dialog('option', 'show');
        var position = $contentDiv.dialog('option', 'position');
        // disable show effect to enable re-positioning (UI bug?)
        $contentDiv.dialog('option', 'show', null);
        // show dialog, otherwise sizing won't work
        $contentDiv.dialog('open');

        // Maximize frame width in order to determine minimal scrollHeight
        $frame.css('width', $contentDiv.dialog('option', 'maxWidth') -
                contentDiv.offsetWidth + frame.offsetWidth);

        var minScrollHeight = body.scrollHeight;
        var maxWidth = body.offsetWidth;
        var minWidth = 0;
        // decrease frame width until scrollHeight starts to grow (wrapping)
        while (Math.abs(maxWidth - minWidth) > 10) {
            var width = minWidth + Math.ceil((maxWidth - minWidth) / 2);
            $body.css('width', width);
            if (body.scrollHeight > minScrollHeight) {
                minWidth = width;
            } else {
                maxWidth = width;
            }
        }
        $frame.css('width', maxWidth);
        // use maximum height to avoid vertical scrollbar (if possible)
        var maxHeight = $contentDiv.dialog('option', 'maxHeight')
        $frame.css('height', maxHeight);
        $body.css('width', '');
        // correct for vertical scrollbar (if necessary)
        while (body.clientWidth < maxWidth) {
            $frame.css('width', maxWidth + (maxWidth - body.clientWidth));
        }

        var minScrollWidth = body.scrollWidth;
        var minHeight = Math.min(minScrollHeight, maxHeight);
        // descrease frame height until scrollWidth decreases (wrapping)
        while (Math.abs(maxHeight - minHeight) > 10) {
            var height = minHeight + Math.ceil((maxHeight - minHeight) / 2);
            $body.css('height', height);
            if (body.scrollWidth < minScrollWidth) {
                minHeight = height;
            } else {
                maxHeight = height;
            }
        }
        $frame.css('height', maxHeight);
        $body.css('height', '');

        // reset widths to 'auto' where possible
        $contentDiv.css('width', 'auto');
        $contentDiv.css('height', 'auto');
        $contentDiv.dialog('option', 'width', 'auto');

        // re-position the dialog
        $contentDiv.dialog('option', 'position', position);

        // hide dialog
        $contentDiv.dialog('close');
        // restore show effect
        $contentDiv.dialog('option', 'show', savedShow);
        // open using show effect
        $contentDiv.dialog('open');
        // remove show effect for consecutive requests
        $contentDiv.dialog('option', 'show', null);

        return;
    }

    //An error is raised if the IFrame domain != its container's domain
    catch (e) {
        window.status = 'Error: ' + e.number + '; ' + e.description;
        alert('Error: ' + e.number + '; ' + e.description);
    }
};
0
nelis

Probieren Sie dies aus, Sie können es auch ändern, wenn Sie möchten. In diesem Beispiel wird jQuery verwendet.

$('#iframe').live('mousemove', function (event) {   
    var theFrame = $(this, parent.document.body);
    this.height($(document.body).height() - 350);           
});
0

@ SchizoDuckies Antwort ist sehr elegant und leicht, aber aufgrund der fehlenden Implementierung von webkit für scrollHeight (siehe hier ) funktioniert es nicht auf Webkit-basierten Browsern (Safari, Chrome, verschiedene und verschiedene mobile Plattformen).

Damit diese Grundidee zusammen mit Gecko- und Trident-Browsern an Webkit funktioniert, muss nur ersetzt werden

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

mit 

<body onload='parent.resizeIframe(document.body.offsetHeight)'>

Solange sich alles auf derselben Domain befindet, funktioniert das ganz gut.

0
nomadkbro