Javascript Iframe wird nicht richtig berechnet Höhe

Ich versuche, meine iframe auf jeder Website wie dieser HERE anzuzeigen, aber aus irgendeinem Grund wird die Höhe nicht korrekt berechnet. Ich bekomme 8px auf dem style-Tag statt 1000+, um diesen Block korrekt anzuzeigen.Javascript Iframe wird nicht richtig berechnet Höhe

<iframe id="iframe" allowtransparency="true" frameborder="0" style="width:100%; border:none" scrolling="no" src="http://newskillsacademy.co.uk/affiliates/iframe.php?&products_ids[]=55072&products_ids[]=51883&products_ids[]=49321&products_ids[]=48561&products_ids[]=48398&products_ids[]=46469&products_ids[]=44080&products_ids[]=43167&products_ids[]=42427&products_ids[]=41068&columns=3&aff_id=3"></iframe> 
<script> 
    var frame = document.getElementById('iframe'); 
    frame.style.height = 0; 
    frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px'; 
</script>

Quelle

2017-05-25 Adrian

Try onload statt – mplungjan

@mplungjan Problem ist, dass es wie ein iframe-Generator ist und muss auf einer zweiten Domain platziert werden, damit die Benutzer Orte, aber ich habe auch eine Quer Surfen Blockierung erhalten, und nicht sicher, wie man die Lösungen von hier aus implementiert. – Adrian

Across Ursprünge können Sie SOL sein – mplungjan

Die Linie, die die Höhe (d.h. frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px';) setzt wahrscheinlich laufen, bevor der Inhalt des iframe geladen hat. Um also die Höhe richtig einzustellen, muss dieser Code ausgeführt werden nach der Inhalt des Iframe geladen haben.

Eine Möglichkeit, dies zu tun, ist die onload Eigenschaft auf eine Funktion zuweisen den Code enthält, um die Höhe Eigenschaft festlegen:

var frame = document.getElementById('iframe'); 
frame.onload = function() { 
    frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px'; 
}

sehen Sie dieses here demonstriert.

Außerdem versucht der Code, den Iframe aus dem DOM zu holen, sobald das Javascript ausgeführt wird. Abhängig von der Position des Skript-Tags/der Datei (z. B. geladen über oder <body>) ist das DOM möglicherweise nicht bereit. Eine Lösung hierfür ist das Warten auf das Ereignis DOMContentLoaded. Dies kann unter Verwendung von EventTarget.addEventListener() unter document erreicht werden.

document.addEventListener("DOMContentLoaded", function(event) { 
 
    console.log("DOM fully loaded and parsed"); 
 
    });

Und weil man zunächst die Frage mit jQuery, die .ready() Methode bietet dazu eine Verknüpfung markiert.

$(document).ready(function(event) { 
 
    console.log("DOM is safe to manipulate"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Quelle

2017-05-25 15:52:24

Hilfe geschätzt, aber http://be-a.co.uk/testframe.html es ist jetzt Laden der Hälfte und erhalten auch einen Cross-Browser-Fehler, den ich hier gesucht, aber nicht verstehe wie man es in meinem Code implementiert. Beachten Sie, dass sich der Iframe in einer anderen Domäne befindet. – Adrian

Haben Sie die Kontrolle über beide Domains? Siehe [diese Antwort] (https://stackoverflow.com/a/9393545/1575353) über eine mögliche Lösung ... –

Auf der zweiten Domain wird keine Kontrolle haben (in diesem Fall habe ich), es ist wie ein Banner was der Benutzer erzeugt und auf seiner Seite platziert. – Adrian

Javascript Iframe wird nicht richtig berechnet Höhe

Antwort

Verwandte Themen