Question

我创建了一个javascript程序，我创建了电影对象，我创建了一个名为myWin的新窗口，在myWin中我创建了另一个名为actorWin的窗口。现在我想在actorWin中传递url（myMovie.actor）和description（myMovie.website_actor），当我点击这里点击这里访问ACTOR WINDOW时。我尝试了下面的方法但是没有用。任何人都可以建议我如何写在actorWin弹出窗口内。

代码：

<!DOCTYPE html>
<html>
<head>

    <title>lab 8</title>
    <script type="text/javascript">

        var myWin = window.open("", "myWin", "height=500, width=500,location,menubar,toolbar,status,resizable");

        function movie(movie_title, website_title, actor, website_actor){
            this.movie_title = movie_title;
            this.website_title = website_title;
            this.actor = actor;
            this.website_actor = website_actor;
        }

        var myMovie = new movie("Before she was Wonder Woman, she was Diana, princess of the Amazons, trained to be an unconquerable warrior. Raised on a sheltered island paradise, Diana meets an American pilot (Chris Pine) who tells her about the massive conflict that's raging in the outside world. Convinced that she can stop the threat, Diana leaves her home for the first time. Fighting alongside men in a war to end all wars, she finally discovers her full powers and true destiny.", 

            "http://www.imdb.com/title/tt0451279/",

            "Gal Gadot is an Israeli actress, singer, martial artist, and model. She was born in Rosh Ha'ayin, Israel, to an Ashkenazi Jewish family. Her parents are Irit, a teacher, and Michael, an engineer, who is a sixth-generation Israeli. She served in the IDF for two years, and won the Miss Israel title in 2004.", 

            "http://www.imdb.com/name/nm2933757/?ref_=tt_cl_t1");

        myWin.document.write(    
            "<script type='text/javascript'>"  
            +    "function movieWindow() {"

            +   "var movieWin = window.open(\"" + myMovie.website_title + "\" , \"movieWin\", \"height=500, width=500,location,menubar,toolbar,status,resizable\");"

            +   "}"

            + "function closeMovie() {"

            +  "movieWin.close()"

            +   "}"

            + "<\/script>");

        myWin.document.write(
        "<script type='text/javascript'>" 
          + "function actorWindow() {"

          +   "var actorWin = window.open(\"''\" , \"actorWin\", \"height=500, width=500,location,menubar,toolbar,status,resizable\");"

          +   "<p style='color: green; font-size: 150%'>  \""+ myMovie.actor + "\" </p>"
          +   "<a  style='color: pink; font-size: 150%' href= \""+myMovie.website_actor +"\"> Click for more info </a> "

          +   "}"

           +    "<\/script>");



        myWin.document.write(

            +"<script type='text/javascript'>"

            +   "<body style='background-image : url(lab8_images/back.png)'>"
            +   "<h1 style= 'text-align: center; color: white; font-family: monospace; font-size: 200%'> What about this movie? </h1>"
            +    '<br/>' + '<br/>' +'<br/>' 

            + "<p style = 'font-family: monospace; font-size: 150%; color: #ffffff; padding: 0px 15px: 0px 15px; text-decoration: none'> \""+ myMovie.movie_title +"\"  </p>"


            +  "<p style = 'font-family: monospace; font-size: 150%; color: #ffffff; text-align:center; text-decoration: none'> <a style='color:white' href = 'javascript: movieWindow()' > CLICK HERE TO ACCESS TO THE MOVIE WINDOW </a><br></p>"

            +   "<p style = 'font-family: monospace;font-size: 150%; color: #ffffff;  text-align: center; text-decoration: none'> <a style='color:white' href = 'javascript: actorWindow()'> CLICK HERE TO ACCESS TO THE ACTOR WINDOW </a><br></p>"

            +   "<p style = 'font-family: monospace; color: white; text-align: center; text-decoration: none; font-size: 150%'> <a style='color:white' href = 'javascript: closeMovie();'> CLICK HERE TO CLOSE THE MOVIE WINDOW </a><br></p>"

            +   "<p style = 'font-family: monospace; color: white; text-align: center; text-decoration: none; font-size: 150%'><a style='color:white' href='javascript:actorWindow.close();'> CLICK HERE TO CLOSE THE ACTOR WINDOW </a><br></p>"

            +   "<p style = 'font-family: monospace; color: white; text-align: center; text-decoration: none; font-size: 150%'><a style='color:white' href='javascript:window.close();'> CLICK HERE TO CLOSE THIS WINDOW </a><br></p>"
            +"  <\/script>"
            );

        </script>

    </head>
    <body background = lab8_images/back.png>

    </body>
    </html>

输出：

https://i.stack.imgur.com/xbPIL.jpg

Answer 1

您可以使用window.opener和postMessage()在浏览上下文之间进行通信

初始HTML

<script>
  let outerWindow = window.open("myWin.html", "_blank");
  window.onmessage = function(e) {
    console.log(e.data);
    // pass data to inner window
    e.source.postMessage(JSON.stringify({a:1, b:2}), document.origin); 
  }
<script>

at“actorWin”HTML

<script>
  window.onmessage = function(e) {
    console.log(e.data); // message from `window` at initial HTML `document`        
  }
  window.opener.opener.postMessage("inner message", document.origin);
</script>

plnkr http://plnkr.co/edit/99cHuMklH9S9d4Rgf73K?p=info

javascript：如何在弹出窗口中编写

1 个答案: