Impossible to link style sheets with window.open without url parameter

Question

Upon closing a jQuery dialog, I use a $.ajax call to retrieve data from a server. In the call back, I pass the returned data the usual way to a function, like so:

success: function (result) { displayPage ( result);}

This function means to display in a pop-up window the argument data and manage these through miscellaneous jQuery commands along with CSS style sheets:

function displayPage (result) // analytical comments included
{
    // (1) this block does not work: testPage shows, not writing occurs-----------
 /*
    var myWindow = window.open('../innout/testPage.php', "_blank", "height=1000, width=1300,top=50,left=150"),
        myPage = myWindow.document.body,
        txt = 'some Text';

    $('#div1', myPage).html (txt);// neither this is operative…
    myPage.write (txt); // nor this
  */

    // (2) this block works, but no structure, no style sheets: -----------------
  /*
    var myWindow = window.open('', "_blank", "height=1000, width=1300,top=50,left=150"),
        myPage = myWindow.document.body,
        txt = 'some Text';

    myWindow.document.write (txt);
  */

    // (3) this block works, but SYNCHRO problem: -----------------

    var myWindow = window.open('', "_blank", "height=1000, width=1300,top=50,left=150"),
        myPage = myWindow.document.body,
        txt = 'some Text',
        pageStruct = "<html>"
                    + "<head><meta charset='utf-8'><title>Landscape</title></head>"
                    + "<body bgcolor='pink'><div id='div1'</div></body>"
              // or + "<body style='background-color: pink'><div id='div1'</div></body>"
                    + "</html>",
        styleLinks = "<link rel='stylesheet' type='text/css' href='../innout/DossierCSS/globalRules.css'>"; 

      // Let's try now to link style sheets: 

        $(styleLinks).appendTo(myPage); // INEFFECTIVE
          // or:
        $(styleLinks).appendTo(myWindow.document.head); // INEFFECTIVE
         // What about this? http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also
        $("<link/>",
        {
           rel: "stylesheet",
           type: "text/css",
           href: "../innout/DossierCSS/globalRules.css"
        }).appendTo("head") // INEFFECTIVE. Also tried: (myWindow.document, "head")

        $(pageStruct).appendTo(myPage); // works

        $(myPage).attr ('bgcolor', 'pink'); // without it, 'original' bgcolor attribute inoperative !

        $('#div1', myPage).toggleClass ('violet');// INEFFECTIVE — .violet defined in globalRules.css as color:purple

        $('#div1', myPage).css ( {"color": "purple" }); // works

        $('#div1', myPage).html (txt); // works
}

My first approach was to pass window.open a URL, i.e. testPage.php —a very simple one:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Landscape</title>
</head>

<body bgcolor="pink">
    <div id="div1"></div>
</body>
</html>

Way (1) allows no writing, while ways (2) and (3) do.

Way (3) seems satisfactory but it is not: I am unable to link css style sheets to the page. I have tried to no avail two different methods, one of which was detailed in an SOE post (quoted). Also, adding either in-line style or html formatting at the pageStruct level is ineffective.

It seems that <link> instructions cannot be passed to <head> because file headers have already been sent. Through way (1), 'modification' instructions briefly flicker in the background then get overridden by the testPage.php contents: apparently, the processing of window.open takes place after the rest of the code: synchro problem !

Notice: a) I also tried to delay the DOM-modification instructions with setTimeOut —unsuccessfully; b) I cannot define a static structure in a page to be loaded for I have to handle dynamic elements.

How then do I link my style sheets in good synchronization?

That actually was the cause of the malfunctionning. 1) If you will, I suggest you delete your comment and re-post it as a formal answer: I will vote it up and it may help other SO users; if you will not I shall vote your comment up anyhow. 2) If you are interested in a part-time job opportunity, let me know how I can get in touch with and I shall send you further details. — Brice Coustillas, Aug 02 '16 at 09:50
;-) glad it helped. As you may have noticed in my comment I don't have too much time right now to write a formal answer, but I will in the evening. And for the part time job, the reason I don't have time is that I've got a full time job, so I'll kindly refuse this :-) — Kaiido, Aug 02 '16 at 10:08

score 1 · Accepted Answer · answered Aug 02 '16 at 11:57

Your problem is not how you do add the stylesheet in the new document (should be in the <head> btw), but it's href attribute.

Currently, you've set it to "../innout/DossierCSS/globalRules.css", which is a "relative URI", and it is relative to the current document.baseURI path.

Since you do set the window.open()'s URL parameter to _blank, the baseURI of the new document will be set by default to about:blank. Then, when converted to an absolute URL, your relative URL will point to an invalid URL.

The solution to this is either to set your <style>'s href attribute to an absolute URL ("http://yoursite.net/innout/DossierCSS/globalRules.css") or to use a <base> element, with its href attribute set to "http://yoursite.net/someDirectory/".
This later approach will set the document's baseURI to its href attribute's value, making all relative URLs relative to this new URL. Note that it should be placed in the document before any other element pointing to an external resource.

Impossible to link style sheets with window.open without url parameter

1 Answers1