Question

任务：

当我的主页加载时，我想正常加载页面。在所有脚本运行之后，我想使用Jquery将IFrame注入到正文中，并使用它来克隆当前页面。（为什么？所以我可以让页面的一部分不在我网站的页面之间重新加载。）

我可以使用src属性注入iframe并成功克隆页面，但是，这会导致页面上的所有内容下载两次（一次是第一次加载页面时，一次是脚本注入iframe时）。

所以，我想使用JQuery来克隆当前页面（头部和主体），并将其附加到Iframe中，或者使用新的html5 srcdoc属性。

目前，我对这两种方式都没有兴趣。让我概述一下这两种方法：

克隆并附加

    // Get the width & height of current window
  wwidth = $(window).width();
  wheight = $(window).height();

  // inject the iframe 
  $("body")
   .append(
   '<iframe seamless ' + 
   ' class="hidden" id="iframe" border="0" frameborder="0" width="' 
   + wwidth + '" height="' + wheight + '"></iframe>' 
   + '<div id="temp"></div>'
   );

                // Attempt to replace iframe contents with current page contents
                $('iframe').contents().replace( $("html").clone().not("iframe") );

注入iframe但不替换内容。

使用SRCDOC

// Same as above bu this part
// Attempt to set iframe contents with srcdoc
$('iframe').attr("srcdoc" , $('html').clone() );

生成结果srcdoc =“[object] [Object]”

P.S。我试图添加srcdoc标签，但我不能。有人有更高分吗？

Answer 1

除了SRCDOC（我还不知道）。

我担心clone（）不会是一个选项。关于DOM规范，不允许在文档之间移动节点（至少在MSIE中是不可能的）。有一个DOM方法可以导入节点，但据我所知，任何浏览器都不支持此方法（DOMDocument->importNode()）。

此外：克隆不会阻止大多数浏览器的“双重下载”。

Answer 2

据我所知，IE 9，FF 5，Chrome 12或Safari 5（在Win 7上）不支持srcdoc属性。

即使这样的简单例子也不起作用：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <iframe seamless
                sandbox="allow-same-origin"
                srcdoc="<p>My fav search engine is <a href='http://www.google.com'>Google</a>.">
        </iframe>
    </body>
</html>

如何使用Jquery将当前文档克隆到IFrame

克隆并附加

使用SRCDOC

2 个答案: