wake-up-neo.net

Ändern Sie die Größe der domänenübergreifenden Iframe-Höhe

Ich versuche, den Parameter iframe height auf den gleichen px-Wert der Seite zu ändern, die innerhalb des iframe geladen wird. Die Seite, die in den iframe geladen wird, stammt aus einer anderen Domäne.

Verschiedene Seiten werden in den iframe geladen, was dazu führt, dass sich die Höhe des iframe-Inhalts ändert. Daher muss ich die iframe-Inhaltshöhe nehmen und auf den Parameter iframe height anwenden.

Hier ein Beispiel, worüber ich spreche: http://jsfiddle.net/R7Yz9/3/

<div class="site"><a href="http://Amazon.com/" target="_top">Amazon </a></div>
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div>
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div>
<iframe id="source" src="http://Amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

.

$(document).ready(function() {
    var iframe = $( "#source" );
    $( "a[target=_top]" ).click( function(){
        iframe.attr( "src", this.href );
        return false;
    }); 
});
29
user874185

Hier ist eine kleine Bibliothek, die alle Probleme mit der Größenanpassung von iFrames an den enthaltenen Inhalt löst.

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

Es behandelt das domänenübergreifende Problem mithilfe der Post-Message-API und erkennt Änderungen am Inhalt des iFrame auf verschiedene Arten.

Funktioniert in allen modernen Browsern und IE8 aufwärts.

EDIT: Um domänenübergreifende Iframe-Höhen ermitteln zu können, müssen Sie auch Zugriff auf die Implementierung eines Skripts auf der Iframe-Seite haben.

26
David Bradshaw

Minimaler Crossdomain-Satz, den ich zum Einbetten eines eingebauten einzelnen Iframes auf einer Seite verwendet habe.

Auf der Einbettungsseite (mit iframe):

<iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe>
<script type="text/javascript">
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
    if (isNaN(e.data)) return;

    // replace #sizetracker with what ever what ever iframe id you need
    document.getElementById('sizetracker').style.height = e.data + 'px';

  }, false);
</script>

Auf eingebetteter Seite (iframe):

<script type="text/javascript">
function sendHeight()
{
    if(parent.postMessage)
    {
        // replace #wrapper with element that contains 
        // actual page content
        var height= document.getElementById('wrapper').offsetHeight;
        parent.postMessage(height, '*');
    }
}

// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen for a message from the iframe.
eventer(messageEvent, function(e) {

    if (isNaN(e.data)) return;

    sendHeight();

}, 
false);
</script>
7
MTJ

Sie müssen auch Zugriff auf die Site haben, auf die Sie sich beim iframing befinden. Ich habe die beste Lösung hier gefunden: https://Gist.github.com/MateuszFlisikowski/91ff99551dcd90971377

yourotherdomain.html

<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript'>
  // Size the parent iFrame
  function iframeResize() {
    var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
    parent.postMessage("resize::"+height,"*");
  }

  $(document).ready(function() {
    // Resize iframe
    setInterval(iframeResize, 1000);
  });
</script>

ihre Website mit iframe

<iframe src='example.html' id='edh-iframe'></iframe>
<script type='text/javascript'>
  // Listen for messages sent from the iFrame
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  eventer(messageEvent,function(e) {
    // If the message is a resize frame request
    if (e.data.indexOf('resize::') != -1) {
      var height = e.data.replace('resize::', '');
      document.getElementById('edh-iframe').style.height = height+'px';
    }
  } ,false);
</script>
2
Joy Picar

Sie erhalten die Inhaltshöhe eines iframe, z. so was:

document.getElementById('iframe-id').contentWindow.document.body.scrollHeight

AKTUALISIEREN

Es kann jedoch Probleme mit Cross-Domain geben. Hier einige Quellen, die unterschiedliche Ansätze zeigen:

http://css-tricks.com/cross-domain-iframe-resizing/

Wie bekomme ich die Höhe der Iframe-Domäne?

Größe der iframe entsprechend der Inhaltshöhe ändern

Größe eines iframes basierend auf dem Inhalt ändern

Wert des Eingabefeldes innerhalb eines iframe abrufen

Hinweis: Letztere zeigen, wie auf ein Feld zugegriffen werden kann. Das Prinzip ist jedoch gleich, um auf eine Körpergröße zuzugreifen

2
LGSon

Wenn Sie den Code der Website, die Sie laden, bearbeiten können, sollten Sie im Folgenden eine umfassende Methode zum Aktualisieren der Höhe des iframe-Containers bereitstellen, wenn sich die Höhe des gerahmten Inhalts ändert.

Fügen Sie den geladenen Seiten den folgenden Code hinzu (möglicherweise in einer Kopfzeile). Dieser Code sendet eine Nachricht, die die Höhe des HTML-Containers enthält, wenn das DOM aktualisiert wird (wenn Sie nur faul laden) oder die Fenstergröße geändert wird (wenn der Benutzer den Browser ändert).

window.addEventListener("load", function(){
    if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe 
    send_height_to_parent_function = function(){
        var height = document.getElementsByTagName("html")[0].clientHeight;
        //console.log("Sending height as " + height + "px");
        parent.postMessage({"height" : height }, "*");
    }
    // send message to parent about height updates
    send_height_to_parent_function(); //whenever the page is loaded
    window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized
    var observer = new MutationObserver(send_height_to_parent_function);           // whenever DOM changes PT1
    var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2
    observer.observe(window.document, config);                                            // PT3 
});

Fügen Sie der Seite, auf der der iframe gespeichert ist, den folgenden Code hinzu. Dadurch wird die Höhe des Iframes aktualisiert, vorausgesetzt, die Nachricht stammt von der Seite, die der Iframe lädt.

<script>
window.addEventListener("message", function(e){
    var this_frame = document.getElementById("healthy_behavior_iframe");
    if (this_frame.contentWindow === e.source) {
        this_frame.height = e.data.height + "px";
        this_frame.style.height = e.data.height + "px";
    }
})
</script>
0
Ulad Kasach

Es gibt keine Optionen in Javascript, um die Höhe einer domänenübergreifenden Iframe-Höhe zu ermitteln, aber Sie können dies mit Hilfe einiger serverseitiger Programmierung tun. Ich habe für dieses Beispiel PHP verwendet

<code>
    <?php
$output = file_get_contents('http://yourdomain.com');
?>
<div id='iframediv'>
    <?php echo $output; ?>
</div>

<iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>

<script>
if(window.attachEvent) {
    window.attachEvent('onload', iframeResizer);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            iframeResizer(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = iframeResizer;
    }
}
   function iframeResizer(){
        var result = document.getElementById("iframediv").offsetHeight;

        document.getElementById("iframe").style.height = result;
        document.getElementById("iframediv").style.display = 'none';
        document.getElementById("iframe").style.display = 'inline';
    }
</script>
</code>
0