前端开拓 | 那些年曾谈起的跨域

发布时间：2019-06-21 21:01:41 所属栏目：建站来源：Aaron

导读：对付前端开拓来说跨域应该是最不生疏的题目了，无论是开拓进程中照旧在口试进程中都是一个常常碰着的一个题目，在开拓进程中碰着这个题目的话一样平常都是找后端同窗去办理，以至于许多人都忽略了对跨域的熟悉。为什么会导致跨域？碰着跨域又怎么去办理呢？本

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>

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

9/15

首页

尾页

SEO排名难做的四大原因	在保持网站优化的同时
网站SEO优化的几个技巧	网站原创内容怎么写？