it-swarm.com.de

Gibt es eine domänenübergreifende automatische Größenänderung der Iframe-Höhe, die funktioniert?

Ich habe ein paar Lösungen ausprobiert, war aber nicht erfolgreich. Ich frage mich, ob es da draußen eine Lösung gibt, vorzugsweise mit einem leicht verständlichen Tutorial.

93
J82

Sie haben drei Alternativen:

1. Verwenden Sie den iFrame-Resizer

Dies ist eine einfache Bibliothek, mit der die Größe von iFrames an den Inhalt angepasst werden kann. Es verwendet die PostMessage- und MutationObserver-APIs mit Fallbacks für IE8-10. Es hat auch Optionen für die Inhaltsseite, um anzufordern, dass der enthaltene iFrame eine bestimmte Größe hat, und kann den iFrame auch schließen, wenn Sie damit fertig sind.

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

2. Verwenden Sie Easy XDM (PostMessage + Flash Combo)

Easy XDM verwendet eine Reihe von Tricks, um die domänenübergreifende Kommunikation zwischen verschiedenen Fenstern in einer Reihe von Browsern zu ermöglichen, und es gibt Beispiele für die Verwendung zur Größenänderung von Iframes:

http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/

http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/

Easy XDM funktioniert mit PostMessage in modernen Browsern und einer Flash-basierten Lösung als Fallback für ältere Browser.

Siehe auch dieser Thread bei Stackoverflow (es gibt auch andere, dies ist eine häufig gestellte Frage). Auch Facebook scheint einen ähnlichen Ansatz zu verwenden .

3. Kommunizieren Sie über einen Server

Eine andere Möglichkeit wäre, die Iframe-Höhe an Ihren Server zu senden und dann von diesem Server von der übergeordneten Webseite mit JSONP abzufragen (oder wenn möglich eine lange Abfrage durchzuführen).

65
Janne Aukia

Ich habe die Lösung gefunden, um die Höhe des Iframes dynamisch basierend auf dessen Inhalt einzustellen. Dies funktioniert für den domänenübergreifenden Inhalt. Es sind einige Schritte zu befolgen, um dies zu erreichen.

  1. Angenommen, Sie haben iframe auf der Webseite "abc.com/page" hinzugefügt

    <div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>

  2. Als nächstes müssen Sie Windows "message" -Ereignis unter der Webseite "abc.com/page" binden.

window.addEventListener('message', function (event) {
//Here We have to check content of the message event  for safety purpose
//event data contains message sent from page added in iframe as shown in step 3
if (event.data.hasOwnProperty("FrameHeight")) {
        //Set height of the Iframe
        $("#IframeId").css("height", event.data.FrameHeight);        
    }
});

On iframe load you have to send message to iframe window content with "FrameHeight" message

function setIframeHeight(ifrm) {
   var height = ifrm.contentWindow.postMessage("FrameHeight", "*");   
}
  1. Auf der Hauptseite, die unter iframe hier "xyz.pqr/contactpage" hinzugefügt wurde, müssen Sie das Windows-Ereignis "message" binden, bei dem alle Nachrichten vom übergeordneten Fenster von "abc.com/page" empfangen werden.
window.addEventListener('message', function (event) {
    
    // Need to check for safty as we are going to process only our messages
    // So Check whether event with data(which contains any object) contains our message here its "FrameHeight"
   if (event.data == "FrameHeight") {

        //event.source contains parent page window object 
        //which we are going to use to send message back to main page here "abc.com/page"
        
        //parentSourceWindow = event.source;
        
        //Calculate the maximum height of the page
        var body = document.body, html = document.documentElement;
        var height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
       
       // Send height back to parent page "abc.com/page"
        event.source.postMessage({ "FrameHeight": height }, "*");       
    }
});

Schließlich wird Ihre Iframe-Höhe beim Laden des Iframes eingestellt.

Viel Spaß beim Programmieren !!!

21
Sudhir

Was ich tat, war, das iframe scrollWidth zu vergleichen, bis es Größe änderte, während ich die IFrame-Höhe inkrementell einstellte. Und es hat gut funktioniert für mich. Sie können das Inkrement nach Belieben anpassen.

   <script type="text/javascript">
    function AdjustIFrame(id) {
        var frame = document.getElementById(id);
        var maxW = frame.scrollWidth;
        var minW = maxW;
        var FrameH = 100; //IFrame starting height
        frame.style.height = FrameH + "px"

        while (minW == maxW) {
            FrameH = FrameH + 100; //Increment
            frame.style.height = FrameH + "px";
            minW = frame.scrollWidth;
        }
    }

   </script>


<iframe id="RefFrame" onload="AdjustIFrame('RefFrame');" class="RefFrame"
    src="http://www.YourUrl.com"></iframe>
14
Troy Mitchel

Hier ist meine einfache Lösung auf dieser Seite. http://lab.ohshiftlabs.com/iframesize/

Hier ist, wie es funktioniert;

enter image description here

Grundsätzlich können Sie, wenn Sie eine Seite in einer anderen Domain bearbeiten können, eine andere Iframe-Seite auf Ihrem Server platzieren, die Cookies spart. Aktualisieren Sie mit einem Intervall, in dem Cookies bei der Aktualisierung gelesen werden, die Höhe des Iframes. Das ist alles.

Herunterladen; http://lab.ohshiftlabs.com/iframesize/iframesizepost.Zip

1
siniradam

Ich habe eine andere serverseitige Lösung für Webentwickler gefunden, die PHP) verwendet, um die Größe eines Iframes zu ermitteln.

Das erste ist die Verwendung des Serverskripts PHP zu einem externen Aufruf über die interne Funktion: (wie ein file_get_contents Mit Ausnahme von curl und dom).

function curl_get_file_contents($url,$proxyActivation=false) {
    global $proxy;
    $c = curl_init();
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
    curl_setopt($c, CURLOPT_REFERER, $url);
    curl_setopt($c, CURLOPT_URL, $url);
    curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
    if($proxyActivation) {
        curl_setopt($c, CURLOPT_PROXY, $proxy);
    }
    $contents = curl_exec($c);
    curl_close($c);
    $dom = new DOMDocument();
    $dom->preserveWhiteSpace = false;
    @$dom->loadHTML($contents);
    $form = $dom->getElementsByTagName("body")->item(0);
    if ($contents) //si on a du contenu
        return $dom->saveHTML();
    else
        return FALSE;
}
$url = "http://www.google.com"; //Exernal url test to iframe
<html>
    <head>
    <script type="text/javascript">

    </script>
    <style type="text/css">
    #iframe_reserve {
        width: 560px;
        height: 228px
    }
    </style>
    </head>

    <body>
        <div id="iframe_reserve"><?php echo curl_get_file_contents($url); ?></div>

        <iframe id="myiframe" src="http://www.google.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"  style="overflow:none; width:100%; display:none"></iframe>

        <script type="text/javascript">
            window.onload = function(){
            document.getElementById("iframe_reserve").style.display = "block";
            var divHeight = document.getElementById("iframe_reserve").clientHeight;
            document.getElementById("iframe_reserve").style.display = "none";
            document.getElementById("myiframe").style.display = "block";
            document.getElementById("myiframe").style.height = divHeight;
            alert(divHeight);
            };
        </script>
    </body>
</html>

Sie müssen unter dem div (iframe_reserve) Den vom Funktionsaufruf erzeugten HTML-Code anzeigen, indem Sie ein einfaches echo curl_get_file_contents("location url iframe","activation proxy") verwenden.

Danach wird eine Body-Event-Funktion mit Javascript geladen und die Höhe des Seiten-Iframes mit einer einfachen Kontrolle des Inhalts div (iframe_reserve) Festgelegt.

Also habe ich divHeight = document.getElementById("iframe_reserve").clientHeight; verwendet, um die Höhe der externen Seite zu ermitteln, die wir aufrufen werden, nachdem der div-Container maskiert wurde (iframe_reserve). Danach laden wir den iFrame mit seiner guten Höhe, das ist alles.

0
headmax

Ich habe ein Skript, das mit seinem Inhalt im iframe abgelegt wird. Außerdem wird sichergestellt, dass iFrameResizer vorhanden ist (es wird als Skript eingefügt), und anschließend wird die Größe geändert.

Ich werde unten ein vereinfachtes Beispiel einfügen.

// /js/embed-iframe-content.js

(function(){
    // Note the id, we need to set this correctly on the script tag responsible for
    // requesting this file.
    var me = document.getElementById('my-iframe-content-loader-script-tag');

    function loadIFrame() {
        var ifrm = document.createElement('iframe');
        ifrm.id = 'my-iframe-identifier';
        ifrm.setAttribute('src', 'http://www.google.com');
        ifrm.style.width = '100%';
        ifrm.style.border = 0;
        // we initially hide the iframe to avoid seeing the iframe resizing
        ifrm.style.opacity = 0;
        ifrm.onload = function () {
            // this will resize our iframe
            iFrameResize({ log: true }, '#my-iframe-identifier');
            // make our iframe visible
            ifrm.style.opacity = 1;
        };

        me.insertAdjacentElement('afterend', ifrm);
    }

    if (!window.iFrameResize) {
        // We first need to ensure we inject the js required to resize our iframe.

        var resizerScriptTag = document.createElement('script');
        resizerScriptTag.type = 'text/javascript';

        // IMPORTANT: insert the script tag before attaching the onload and setting the src.
        me.insertAdjacentElement('afterend', ifrm);

        // IMPORTANT: attach the onload before setting the src.
        resizerScriptTag.onload = loadIFrame;

        // This a CDN resource to get the iFrameResizer code.
        // NOTE: You must have the below "coupled" script hosted by the content that
        // is loaded within the iframe:
        // https://unpkg.com/[email protected]/js/iframeResizer.contentWindow.min.js
        resizerScriptTag.src = 'https://unpkg.com/[email protected]/js/iframeResizer.min.js';
    } else {
        // Cool, the iFrameResizer exists so we can just load our iframe.
        loadIFrame();
    }    
}())

Dann kann der Iframe-Inhalt an einer beliebigen Stelle innerhalb einer anderen Seite/Site eingefügt werden, indem das Skript wie folgt verwendet wird:

<script
  id="my-iframe-content-loader-script-tag"
  type="text/javascript"
  src="/js/embed-iframe-content.js"
></script>

Der Iframe-Inhalt wird an der Stelle eingefügt, an der Sie das Skript-Tag platzieren.

Hoffe das ist hilfreich für jemanden. ????

0
ctrlplusb