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

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

导读：http://localhost:7000/b.html !DOCTYPEhtml html head metacontent=text/html;charset=UTF-8http-equiv=Content-Type/ title无/title /head body scripttype=text/javascript functioncheckHash(){ vardata=''; sw

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也是一个固定的值，利用这个，我们就可以实现跨域了。

http://localhost:6000/a.html

<iframe src="http://localhost:7000/b.html" frameborder="1"></iframe>  
<script>  
var ifr = document.querySelector('iframe')  
ifr.style.display = 'none'  
var flag = 0;  
ifr.onload = function () {  
    if (flag == 1) {  
        ifr.contentWindow.close();  
    } else if (flag == 0) {  
        flag = 1;  
        ifr.contentWindow.location = 'http://localhost:6000/proxy.html';  
    }  
}  
</script>

（编辑：ASP站长网）