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

沈。 2018-12-27 02:57:19
我想在a页面点一个按钮,就在b页面追加一些内容。同时发生
...全文
1062 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
風灬雲 2018-12-28
  • 打赏
  • 举报
回复
考虑全面一点的话,可以考虑轮询,不要让两个页面太依赖父子关系,子页面通过定时器获取修改后的内容 具体思路: 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不能同步
風灬雲 2018-12-28
  • 打赏
  • 举报
回复
父窗口

<!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>
这样是可以实现,但是不管哪个页面刷新就会失效了
沈。 2018-12-28
  • 打赏
  • 举报
回复 1
引用 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 = "......."
老师您好,那如果用window.open的话,怎么检测B页面是否存在呢,第一次点击的话可以打开B页面,第二次不是又打开一个新的B页面了吗
天际的海浪 2018-12-27
  • 打赏
  • 举报
回复
只有以下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 = "......."

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧