在iframe中复制当前页面：iframe不会加载

Question

我正在尝试在iframe中复制当前页面（以演示页面在移动屏幕上的外观）。但页面只是不会加载在iframe中 - 它只是空白。我的代码有什么问题吗？

$(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 {
    	$('<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>

编辑：在Firefox上运行本地html文件时的结果屏幕截图;

Answer 1

在访问iframe父母的文档时，浏览器非常挑剔。查看您是否在iframe中的更简单方法是检查父级是否存在：

$(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();
  }
});