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

发布时间：2019-06-22 04:52:05 所属栏目：优化来源：Aaron

导读：副标题#e# 对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解

http://localhost:7000/b.html

<!DOCTYPE html>  
<html>  
<head>  
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
<title>无</title>  
</head>  
<body>  
<script type="text/javascript">  
function checkHash(){  
    var data = '';  
    switch(location.hash){  
        case '#Aaron':  
              data = 'my Aaron';  
              break;  
        case '#Angie':  
              data = 'my Angie';  
              break;  
        default : break;  
    }  
    data && callBack('#'+data);  
}  
function callBack(hash){  
   var proxy = document.createElement('iframe');  
   proxy.style.display = 'none';  
   proxy.src = 'http://localhost/c.html'+hash;  
   document.body.appendChild(proxy);  
}  
window.onload = checkHash;  
</script>  
</body>  
</html>

http://localhost:6000/c.html

<!DOCTYPE html>  
<html>  
<head>  
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
<title>无</title>  
</head>  
<body>  
<script type="text/javascript">  
parent.parent.location.hash = self.location.hash.substring(1);  
</script>  
</body>  
</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也是一个固定的值，利用这个，我们就可以实现跨域了。

（编辑：PHP编程网 - 黄冈站长网）

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

7/15

首页

尾页

搜索引擎优化是啥意思	企业网站SEO优化为什
如何在招投标中进行项	网站不发文章不发外链