一个页面的点击事件在另一个页面响应

我想在a页面点一个按钮，就在b页面追加一些内容。同时发生

解决方案 »

  1.   

    只有以下4种情况可以做到，并且A页面和B页面必须同域，不能跨域。情况1：A页面用iframe嵌入B页面
    document.getElementById("iframe的id").contentWindow.document.getElementById("B页面元素id").innerHTML = "......."情况2：B页面用iframe嵌入A页面
    parent.document.getElementById("B页面元素id").innerHTML = "......."情况3：A页面用 window.open() 打开B页面
    var bWin = window.open("B页面地址");
    bWin.document.getElementById("B页面元素id").innerHTML = "......."情况4：B页面用 window.open() 打开A页面
    opener.document.getElementById("B页面元素id").innerHTML = "......."
      

  2.   

    老师您好，那如果用window.open的话，怎么检测B页面是否存在呢，第一次点击的话可以打开B页面，第二次不是又打开一个新的B页面了吗
      

  3.   

    父窗口<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="button" value="点击"/>
    <script>
        var newWindow=null;
        document.querySelector("input").onclick=function(){
            if(!newWindow){
                newWindow=window.open("./demo1.html");
                newWindow.onload=function(){
                    newWindow.document.querySelector("#box").innerText+="点击"
                }
            }else {
                newWindow.document.querySelector("#box").innerText+="点击"
            }
        }
    </script>
    </body>
    </html>子窗口<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="box"></div>
    <script>
        window.onunload=function(){
            window.opener.newWindow=null;
        }
    </script>
    </body>
    </html>这样是可以实现，但是不管哪个页面刷新就会失效了
      

  4.   

    考虑全面一点的话，可以考虑轮询，不要让两个页面太依赖父子关系，子页面通过定时器获取修改后的内容
    具体思路：
                1、存一个本地缓存标记B页面是否打开，B页面的onload事件里面修改本地缓存为打开状态，onunload事件修改为未打开状态，A页面点击按钮时通过判断缓存标记决定是否新开窗口
                2、数据的修改，如果纯粹只是前端的操作，修改的数据也可以使用本地缓存；A页面点击时把需要修改的内容放到缓存里面，B页面设置定时器去获取缓存，获取完后清空缓存
    A页面<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="button" value="点击"/>
    <script>
        document.querySelector("input").onclick=function(){
            if(!localStorage.getItem("open")){
                window.open("./demo1.html");
            }
            localStorage.setItem("text","点击")
        }
    </script>
    </body>
    </html>B页面<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="box"></div>
    <script>
        window.onunload=function(){
            localStorage.removeItem("open")
        }
        window.onload=function(){
            localStorage.setItem("open","111");
            setInterval(function(){
               if(localStorage.getItem("text")){
                   document.querySelector("#box").innerText+=localStorage.getItem("text");
                   localStorage.removeItem("text")
               }
            },100)
        }
    </script>
    </body>
    </html>这里用localStorage而不用sessionStorage的原因是 window.open打开的窗口session不能同步