跨域--window.name + iframe

最新推荐文章于 2025-06-24 14:30:11 发布

liuliuliu_666

最新推荐文章于 2025-06-24 14:30:11 发布

阅读量821

点赞数

CC 4.0 BY-SA版权

分类专栏：前端跨域文章标签：域名跨域

本文链接：https://blog.youkuaiyun.com/liuliuliu_666/article/details/77874176

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

跨域

2 篇文章

订阅专栏

name在浏览器环境中是一个全局/window对象的属性，且挡在frame中加载新页面时，name的属性值依旧保持不变。
通过在iframe中加载一个资源，该目标页面将设置frame的name属性。此name属性值可被获取到，以访问web服务发送的信息。
但name属性仅对相同域名的frame可访问。这意味着为了访问name属性，当远程web服务页面被加载后，必须导航frame回到原始域。
同源斜掠依旧防止其他frame访问name属性。一旦name属性获得，销毁frame。

原理核心：window对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。
依此原理，我们可以在页面A中用iframe加载其它域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，页面A的iframe加载完成以后，页面A修改iframe的地址，将其变成同域的一个地址，然后就可以独处window.name的值了。

首先创建a.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        let data = '';
        const ifr = document.createElement('iframe');
        ifr.src = 'http://localhost:8080/b.html';
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        ifr.onload = function() {
            //再把iframe的src设置为同源的，这样就能使用window.name了。
            ifr.src = 'http://localhost:8081/c.html';
            ifr.onload = function() {
                data = ifr.contentWindow.name;
                console.log('收到数据',data);
            }
        }
    </script>
</head>
<body>

</body>
</html>

之后在创建b.html

<script>
    window.name = '你要的数据';
</script>