前端开发 | 那些年曾谈起的跨域(5)

发布时间：2019-06-21 15:44 所属栏目：21 来源：Aaron

导读：http://localhost:7000/b.html varperson={ name:'Aaron', age:18 } window.name=JSON.stringify(person) http://localhost:6000/proxy.html !DOCTYPEhtml htmllang=en head metacharset=UTF-8 titleproxy/title /h

http://localhost:7000/b.html

var person = {  
  name: 'Aaron',  
  age: 18  
}  
window.name = JSON.stringify(person)

http://localhost:6000/proxy.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>proxy</title>  
</head>  
<body>  
<p>这是proxy页面</p>  
</body>  
</html>

在http://localhost:6000下有一个a.html，在http://localhost:7000下有一个b.html，在http://localhost:6000/a.html中创建了一个iframe标签并把地址指向了http://localhost:7000/b.html，在b.html中的window.name赋值保存了一段数据，但是现在还获取不了，因为是跨域的，所以，我们可以把src设置为当前域的http://localhost:6000/proxy.html，虽然域名改变了但是window.name是没有改变的。这样就可以拿到我们想要的数据了。

postMessage(HTML5)

可能很多不知道postMessage整个API,在HTML5中新增了postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递，postMessage在很多浏览器中都已经得到了良好的支持，所以可放心的使用。该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。

postMessage()方法接受两个参数

1. data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

1. origin：字符串参数，指明目标窗口的源，协议+主机+端口号+URL，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

http://localhost:6000/a.html

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无</title>  
</head>  
<body>  
<div>  
    <input id="text" type="text" value="My name’s Aaron" />  
    <button id="send" >发送消息</button>  
</div>  
<iframe id="receiver" src="http://localhost:7000/b.html"></iframe>  
<script>  
window.onload = function() {  
    var receiver = document.getElementById('receiver').contentWindow;  
    var btn = document.getElementById('send');  
    btn.addEventListener('click', function (e) {  
        e.preventDefault();  
        var val = document.getElementById('text').value;  
        receiver.postMessage("Hello "+val+"！", "http://localhost:7000");  
    });  
}  
</script>  
</body>  
</html>

（编辑：ASP站长网）