Doppelte aktuelle Seite in iframe: iframe wird nicht geladen

Question

Ich versuche, die aktuelle Seite in einem iframe zu duplizieren (um zu demonstrieren, wie die Seite auf einem mobilen Bildschirm aussehen wird). Aber die Seite wird einfach nicht in den Iframe geladen - es ist nur leer. Irgendeine Idee, die mit meinem Code falsch ist?

$(document).ready(function(){ 
 

 
    var iframe = $('#my-iframe', window.parent.document); 
 

 
    // if already in iframe 
 
    if (iframe.length > 0) { 
 
     $('<p>I\'m in an iframe!</p>').appendTo($('body')); 
 

 
     // Now I can preview the website in mobile view! 
 

 
     return; 
 
    } 
 
    else { 
 
    \t $('<iframe>', { 
 
      src: window.location.href, 
 
      id: 'my-iframe', 
 
      scrolling: 'no' 
 
     }).appendTo($('body')).load(); 
 
    } 
 
});

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

 
<p>The below iframe should contain this page aswell</p>

Edit: Screenshot der Ergebnisse, wenn eine lokale HTML-Datei auf Firefox läuft;

Answer 1

Browser sind zu Recht knifflig, wenn es darum geht, auf das Dokument eines Elternteils eines Iframes zuzugreifen. Eine einfachere Methode, um zu sehen, ob Sie in einem Iframe sind, besteht darin, einfach zu überprüfen, ob das übergeordnete Objekt vorhanden ist:

$(document).ready(function(){ 
    // if already in iframe 
    if (window.parent && window.parent !== window) { 
    $('<p>I\'m in an iframe!</p>').appendTo($('body')); 
    return; 
    } else { 
    $('<iframe>', { 
     src: window.location.href, 
     id: 'my-iframe', 
     scrolling: 'no' 
    }).appendTo($('body')).load(); 
    } 
});