不同页面之间的相互通信(跨域)

最新推荐文章于 2024-05-08 13:29:48 发布

盗&帅

最新推荐文章于 2024-05-08 13:29:48 发布

阅读量2.6k

点赞数 2

分类专栏： js java 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_41171482/article/details/107714745

版权

java 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。
那么跨域页面之间如何进行交互呢？
首先我们需要设计一下页面的显示，我们总不可能让两个互不相关的页面进行交互吧，就像我们自己项目的页面链接到别的页面，在别的页面上进行操作，我们自己页面还能与其交互，这个肯定是不现实的。肯定是我A页面进行了一个操作，你B页面上来监听他，相反的，B页面上进行操作A页面上来进行监听，只有这样大家都约定好了才能进行交互。
好了，废话不多说，首先就是需要把A和B两个页面进行对应关系的建立，简单来说就是把A和B页面联系起来。由于资源的限制，我这里的案例是基于不同端口号之间的跨域。其实，其他的跨域也是一样的道理。案例中我们使用<iframe></iframe>
标签将AB两个页面关联起来，关于<iframe></iframe> 标签的作用这个大家可以进行百度。
关联后的页面代码下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
</head>
<body>
    <div>
        <iframe src="http://localhost:8088/Child.html" id="myFrame" width="100%"></iframe>
    </div>
    <button onclick="parent()">父页面按钮</button>
    <div style="width: 100px;height: 100px;background: red" id="parent">

    </div>
</body>
</html>

我们现在两个页面就叫做子页面和父页面，上面的就是父页面的代码，下面便是子页面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
    <button onclick="child()">子页面按钮</button>
    <div style="width: 100px;height: 100px;background: blue" id="childDiv">

    </div>
</body>
</html>

由于是简单的案例，就没有做多过于华丽的页面效果。
子页面如图：
在这里插入图片描述
父页面如图：

大家可以注意一下两个页面红框框起来的地方，两个的端口号是不同的，这个从父页面上的代码中就可以看出来，<iframe></iframe> 中的子页面地址端口号是8088，父页面上的端口号是8080。现在这2个页面就已经关联了对应的关系了。接着便是进行对应的通信，为了更加直观的显示，便做了一个效果：子页面按钮点击的时候控制父页面的div显示；父页面按钮点击的时候控制子页面div的显示。
首先，我们先实现第一个效果，就是子页面按钮点击的时候控制父页面的div显示；如果能够实现这个功能，那么就表示，子页面向父页面传递是可行的。其实实现这个主要就是2个步骤，1：子页面向父页面发送数据；2：父页面监听子页面的方法。
1.子页面向父页面发送数据关键代码(在子页面上编写)：

/**
     * 向父页面传递信息
     */
    function child(){
        alert("子按钮被点击了")
        window.parent.postMessage({
            msg:"子传父修改父div显示隐藏"
        },'*');
    }

2.父页面监听子页面的方法关键代码(父页面上编写)

/**
     * 监听子页面传递数据
     */
    window.addEventListener('message',function(e){
        var data =e.data.msg;
        alert(data);
        var parent = document.getElementById('parent');
        if(parent.style.display=='none'){
            parent.style.display='block';
        }else{
            parent.style.display='none';
        }

    },false);

这里是使用window.parent.postMessage方法和window.addEventListener方法分别进行发送和监听。编写好对应的方法和监听后，点击按钮，观察父页面div的显示。
点击前：
在这里插入图片描述
点击1次后：

点击2次后：

看到效果后，已经实现了第一个功能，说明子向父传递是可行的；接下来便是需要进行父向子传递了。思路是一样的，先在父页面上编写，传递的方法，在子页面上编写监听方法。
父页面传递方法：

/**
     * 向子页面传递信息
     */
    function parent() {
        alert("父按钮点击");
        var myframe = document.getElementById('myFrame');//获取iframe
        myframe.contentWindow.postMessage({data:'父传子改变子页面div显示'},"http://localhost:8088");
    }

首先，这里先获取到子页面，然后使用contentWindow.postMessage进行传递，注意这里的方法和参数和子页面向父页面是不同的，这里第一个参数是需要传入的值。第二个参数是子页面的协议+地址+端口号。接着便是在子页面上编写对应监听方法了。

/**
     * 监听父页面传递信息
     */
    window.addEventListener('message', function(e){
        alert(e.data.data);
        var childDiv = document.getElementById('childDiv');
        if(childDiv.style.display=='none'){
            childDiv.style.display='block'
        }else{
            childDiv.style.display='none';
        }
    })

编写好后进行页面上的验证，点击父页面按钮。
点击前：
在这里插入图片描述
点击第一次：

点击第二次：

观察效果，这样便实现了父页面向子页面的传递。那么这两个页面也就实现了交互。其他跨域的情况也是如此的思想。

完整父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
</head>
<body>
    <div>
        <iframe src="http://localhost:8088/Child.html" id="myFrame" width="100%"></iframe>
    </div>
    <button onclick="parent()">父页面按钮</button>
    <div style="width: 100px;height: 100px;background: red" id="parent">

    </div>
</body>
<script>

    /**
     * 向子页面传递信息
     */
    function parent() {
        alert("父按钮点击");
        var myframe = document.getElementById('myFrame');//获取iframe
        myframe.contentWindow.postMessage({data:'父传子改变子页面div显示'},"http://localhost:8088");
    }

    /**
     * 监听子页面传递数据
     */
    window.addEventListener('message',function(e){
        var data =e.data.msg;
        alert(data);
        var parent = document.getElementById('parent');
        if(parent.style.display=='none'){
            parent.style.display='block';
        }else{
            parent.style.display='none';
        }

    },false);
</script>
</html>

子页面完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
    <button onclick="child()">子页面按钮</button>
    <div style="width: 100px;height: 100px;background: blue" id="childDiv">

    </div>
</body>
<script>

    /**
     * 向父页面传递信息
     */
    function child(){
        alert("子按钮被点击了")
        window.parent.postMessage({
            msg:"子传父修改父div显示隐藏"
        },'*');
    }

    /**
     * 监听父页面传递信息
     */
    window.addEventListener('message', function(e){
        alert(e.data.data);
        var childDiv = document.getElementById('childDiv');
        if(childDiv.style.display=='none'){
            childDiv.style.display='block'
        }else{
            childDiv.style.display='none';
        }
    })
</script>
</html>

以上便是个人对于不同页面之间的相互通信(跨域)的一些心得，可能写的不是特别的好，只是希望对小伙伴们有一些帮助，特别是对于一些萌新们，只希望能够帮助你们就好。（最后希望大神们勿喷）

盗&帅

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
不同页面之间的相互通信(跨域)

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。那么跨域页面之间如何进行交互呢？首先我们需要设计一下页面的显示，我们总不可能让两个互不相关的页面进行交互吧，就像我们自己项目的页面链接到别的页面，在别的页面上进行操作，我们自己页面还能与其交互，这个肯定是不现实的。肯定是我A页面进行了一个操作，你B页面上来监听他，相反的，B页面上进行操作A页面
复制链接

扫一扫

专栏目录