Search code examples
javascriptwindow.open

document.write within a new open.document

I was wondering if it is possible to have a new window.open (It will be the child window) nested into the document.write of the parent window of myWin.window.open?

myWin.document.write("<a href='#' onclick="window.open('http://www.imdb.com/title/tt2015381/','newMovie','height=200,width=400,left=400,top=100,scrollbars,status,resizable,dependent');">Click Here to Access the Movie Window</a> <br><br>");

here is the full codes, if this helps better:

<script type="text/javascript">    
var myWin = window.open("", "", "height=500,width=680,resizable=yes,top=100,left=400");
    myWin.document.write('<html><head><title>Guardian Of the Galaxy<\/title>');
    myWin.document.write('<style type="text\/css">');
    myWin.document.write('<!-- ');
    myWin.document.write('body#lab8img {background-image: url("Labs_Images/GofG.jpg");background-repeat: no-repeat;background-size: cover;} ');
    myWin.document.write('p {color:#fff;font-size:20px;} ');
    myWin.document.write('h1 {color:#fff;font-size:24px;} ');
    myWin.document.write('a {color:#000;font-weight:bold; line-height:0.5; width:100%; text-decoration:none;} ');
    myWin.document.write('a hover {color:#2B65EC;font-weight:bold; line-height:0.5; padding:15px;} ');
    myWin.document.write('div#box {background: rgba(255,255,255,.5); border: 2px solid black; margin: 30px;height: 27%; width:90%;} ');
    myWin.document.write('--><\/style>');
    myWin.document.write('<\/head><body id="lab8img" onload="setImageSize();">');
    myWin.document.write('<\/body>');
    myWin.document.write('<\/html>');
    myWin.document.close();
    myWin.document.write("<div style='text-align:center; '><h1>What about the Movie?</h1></div> <br>");
    myWin.document.write("<div style='text-align:left; padding:0px 8px 0px 8px;'><p>Guardians of the Galaxy is a 2014 American superhero film based on the Marvel Comics superhero team of the same name, produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures. It is the tenth installment in the Marvel Cinematic Universe. </p></div><br>");
    myWin.document.write("<div Id='box' style='text-align:center;");


    myWin.document.write("<a href='#' onclick="window.open('http://www.imdb.com/title/tt2015381/','newMovie','height=200,width=400,left=400,top=100,scrollbars,status,resizable,dependent');">Click Here to Access the Movie Window</a> <br><br>");
    myWin.document.write("</div>");
    </script>
Solution

  • Your idea works fine. There is nothing inherently problematic with using javascript to generate a popup window with a link to generate another popup window.

    The issue is a small syntax error: you are not escaping your double-quotes on the line where you are writing the a tag, so it breaks because your string is not what you expect it to be

    myWin.document.write("<a href='#' onclick="window.open('...

    You are opening your string with double quotes ("<a href...) but then you use double quotes again in the onclick event (onclick="window.open(...) so just escape the double quotes in the onclick event (note the back slashes)

    myWin.document.write("<a href='#' onclick=\"window.open('http://www.imdb.com/title/tt2015381/','newMovie','height=200,width=400,left=400,top=100,scrollbars,status,resizable,dependent');\">Click Here to Access the Movie Window</a> <br><br>");

    Also of course note that the code will also break if you have popups blocked, because myWin won't get assigned the new window if popups are blocked.