加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 （https://www.hxwgxz.com/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 建站 > 正文

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

发布时间：2019-06-21 20:29:08 所属栏目：建站 来源：Aaron
导读：对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解决呢？本

http://localhost:7000/b.html

  1. var person = {  
  2.   name: 'Aaron',  
  3.   age: 18  
  4. }  
  5. window.name = JSON.stringify(person)  

http://localhost:6000/proxy.html

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>proxy</title>  
  6. </head>  
  7. <body>  
  8. <p>这是proxy页面</p>  
  9. </body>  
  10. </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

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无</title>  
  6. </head>  
  7. <body>  
  8. <div>  
  9.     <input id="text" type="text" value="My name’s Aaron" />  
  10.     <button id="send" >发送消息</button>  
  11. </div>  
  12. <iframe id="receiver" src="http://localhost:7000/b.html"></iframe>  
  13. <script>  
  14. window.onload = function() {  
  15.     var receiver = document.getElementById('receiver').contentWindow;  
  16.     var btn = document.getElementById('send');  
  17.     btn.addEventListener('click', function (e) {  
  18.         e.preventDefault();  
  19.         var val = document.getElementById('text').value;  
  20.         receiver.postMessage("Hello "+val+"！", "http://localhost:7000");  
  21.     });  
  22. }  
  23. </script>  
  24. </body>  
  25. </html>  

（编辑：核心网）

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

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

      Copygight © 2008-2022 https://www.hxwgxz.com/ All Rights Reserved. 核心网