跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。
那么跨域页面之间如何进行交互呢?
首先我们需要设计一下页面的显示,我们总不可能让两个互不相关的页面进行交互吧,就像我们自己项目的页面链接到别的页面,在别的页面上进行操作,我们自己页面还能与其交互,这个肯定是不现实的。肯定是我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>
以上便是个人对于不同页面之间的相互通信(跨域)的一些心得,可能写的不是特别的好,只是希望对小伙伴们有一些帮助,特别是对于一些萌新们,只希望能够帮助你们就好。(最后希望大神们勿喷)