Question

我正在使用window.open创建一个空窗口，然后使用jquery DOM操作方法填充它。我想做的一件事是确保新窗口中包含父窗口中可用的所有相同脚本。我还复制了所有样式表，以及父窗口HEAD部分中的任何其他数据，所以我决定这样做：

    $(floatingMap.window.document.head).append(
            $("<base>", {"href": location.href})).append(
            $("head").children().clone()));

首先创建一个<base>标记，确保正确解释源文档中的相对URL，然后从源文档的head部分注入所有标记的副本。我可以使用Chrome的DOM检查器在新窗口中检查注入的对象，一切看起来都不错，但我遇到的问题是脚本没有加载。另一方面，样式表加载正常。我可以做些什么来使脚本正确加载？

更新

在一个可能相关的问题中，我发现以下代码有意外结果：

 $(floatingMap.window.document.head).append(
    $("<script>").text("window.opener.childWindowReady()"));

这会导致指定的代码在父窗口的上下文中执行，而不是在子窗口中执行。任何想法为什么会这样？

Answer 1

这似乎是一个jquery错误。从jquery操作中排除脚本标记，然后使用纯javascript添加这些标记按预期工作：

    var scripts = document.getElementsByTagName("script");

    function loadScript (index)
    {
        if (index == scripts.length) 
            onChildWindowReady ();
        else if (scripts[index].src)
        {
            console.log ("injecting: " + scripts[index].src);
            var inject = document.createElement("script");
            inject.src = scripts[index].src;
            floatingMap.window.document.head.appendChild(inject);
            inject.onload = function () { loadScript (index + 1); };
        }
        else
            loadScript (index + 1);
    }
    loadScript (0);

Answer 2

除了document.writeln之外，还可以动态添加所有内容并执行它们。

例如，

jQuery(document).ready(function(){
    jQuery('body').append("jquery loaded");
    var w = window.open();
    var htmlContent = document.documentElement;
    w.document.writeln("<html>"+htmlContent.innerHTML+"</html>");
    w.document.close();

});

这开启了jsfiddle结果窗口的一个克隆，它将包括jquery以及head中的脚本内容。

http://jsfiddle.net/6Qks8/

将javascript标记从父页面克隆到子页面

2 个答案: