用window.name来解决不同网页间的数据通信

最新推荐文章于 2021-04-05 13:00:40 发布

theanarkh

最新推荐文章于 2021-04-05 13:00:40 发布

阅读量1k

点赞数

分类专栏： javascript html

本文链接：https://blog.csdn.net/THEANARKH/article/details/52866054

版权

javascript 同时被 2 个专栏收录

121 篇文章 1 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

今天有个同事问到如何在原网页和被打开的网页中进行数据通信，这里说一下用window.name的解决方法。
a.html

<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
<a href="javascript:void 0;" id="click">click</a>
<script type="text/javascript">
    window.name = 'haha';
    document.getElementById('click').onclick = function(event) {
        open = window.open('b.html');
        open.name = 'aaaaaaaaaaa';
        event.stopPropagation()
        return false;
    };
    window.onclick = function(){
        console.log(window.name);
        open.name ='1111111111111111'
        $(open).trigger('click')
    }
</script>
</body>
</html>

b.html

<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
hello
<script type="text/javascript">
    console.log(window.name);
    console.log(window.opener.name);
    window.opener.name = '222222222222';
    window.onclick = function() {
        console.log(window.name)
    }
    $(window.opener).trigger('click');
</script>
</body>
</html>

1.首先可以在网页a里对网页b的tmp.name进行数据赋值，然后在b里通过window.name进行访问。或者在网页a里对自身的window.name进行赋值，然后在b里用window.opener.name进行访问。这种可用于在某个网页中打开新网页，然后进行数据单向的通信。
2.如果需要在两个网页间进行通信，那么可以在网页a,b里绑定一种事件，这里绑定的是点击事件，然后在各自的网页里进行触发。事件冒泡什么的这些细节可能需要注意一下。