加入收藏 | 设为首页 | 会员中心 | 我要投稿 威海站长网 （https://www.0631zz.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

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

http://localhost:7000/b.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
  5. <title>无</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. function checkHash(){  
  10.     var data = '';  
  11.     switch(location.hash){  
  12.         case '#Aaron':  
  13.               data = 'my Aaron';  
  14.               break;  
  15.         case '#Angie':  
  16.               data = 'my Angie';  
  17.               break;  
  18.         default : break;  
  19.     }  
  20.     data && callBack('#'+data);  
  21. }  
  22. function callBack(hash){  
  23.    var proxy = document.createElement('iframe');  
  24.    proxy.style.display = 'none';  
  25.    proxy.src = 'http://localhost/c.html'+hash;  
  26.    document.body.appendChild(proxy);  
  27. }  
  28. window.onload = checkHash;  
  29. </script>  
  30. </body>  
  31. </html>  

http://localhost:6000/c.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
  5. <title>无</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. parent.parent.location.hash = self.location.hash.substring(1);  
  10. </script>  
  11. </body>  
  12. </html>  

a.html中有一个隐藏的iframe,该iframe指向异域http://localhost:7000/b.html的b.html，且传递hash值给b.html`b.html获取hash值，生成data值，然后动态创建iframe，该iframe将data值传给与a.html同域的c.html 因为c.html与a.html`同域，可以传值固然也就解决了跨域问题。

window.name

window.name这个属性不是一个简单的全局属性只要在一个window下，无论url怎么变化，只要设置好了window.name，那么后续就一直都不会改变，同理，在iframe中，即使url在变化，iframe中的window.name也是一个固定的值，利用这个，我们就可以实现跨域了。

（编辑：威海站长网）

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

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

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

      Copygight © 2008-2022 https://www.0631zz.cn/ All Rights Reserved. 威海站长网