0

I'm using window.open to create an empty window and then populating it using jquery DOM manipulation methods. One thing I'd like to do is make sure the new window has all the same scripts available in it that are in the parent window. I'm also duplicating all the style sheets, plus any other data that's in the parent window HEAD section, so what I decided to do is this:

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

This first creates a <base> tag that ensures the relative URLs in the source document are interpreted correctly, then injects a copy of all the tags from the head section of the source document. I can inspect the injected objects in the new window using Chrome's DOM inspector, and everything looks OK, but the problem I'm having is that the scripts aren't loading. The stylesheets, on the other hand, are loading fine. Any ideas what I can do to make the scripts load correctly?

Update:

In a potentially related problem, I've found that the following code has unexpected results:

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

This causes the specified code to execute in the context of the parent window, not the child window. Any ideas why this would be the case?

Jules
  • 13,417
  • 7
  • 75
  • 117
  • Is there a reason not to simply load the page from a url? – olleicua Oct 13 '13 at 04:13
  • Yes: the page content must be dynamically generated based on information known only at the client. Fast turnaround is also a requirement, so I'd like to avoid the server round trip. – Jules Oct 13 '13 at 09:06

2 Answers2

0

This appears to be a jquery bug. Excluding the script tags from the jquery operation and then adding those using pure javascript works as expected:

    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);
Jules
  • 13,417
  • 7
  • 75
  • 117
0

In addition with document.writeln it is possible to add all contents dynamically and also execute them.

For example,

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

});

This demostrates opening a clone of the jsfiddle result window that will include jquery as well as script content within head.

http://jsfiddle.net/6Qks8/

melc
  • 11,373
  • 2
  • 30
  • 39
  • I usually try to avoid using document.write for some of the reasons described at http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice -- particularly the last reason given by the accepted answer. – Jules Oct 13 '13 at 19:14