window.name + iframe 跨域获取数据

最新推荐文章于 2024-07-08 10:53:15 发布

Sparrowflying

最新推荐文章于 2024-07-08 10:53:15 发布

阅读量2.4k

点赞数

分类专栏： js html

本文链接：https://blog.csdn.net/Sparrowflying/article/details/79744368

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

【原理1】：window对象的name属性特征 —— name 属性可设置或返回存放窗口的名称的一个字符串，同一个浏览器窗口或同一个 iframe 载入的页面共享一个window.name。

意思是只要你不关闭页面，仅仅改变网址的话， window.name 是不会变的，而且每一个打开的页面都能获取并修改 window.name 的值。

【原理2】：父页面能够通过 iframe 的 contentWindow 的属性，访问到子页面的内容（不跨域的情况下）。

意思是利用 iframeObj.contentWindow.name 是能够获取到 iframe 窗口内同一域名页面的 window.name。

So，利用这两个特性，跨域方案如下：

案例：www.aaa.com/index.html 想要获取到 www.bbb.com/data.html 的数据。（辅助页面 www.aaa.com/null.html）

这三个页面，内容如下：

1、www.aaa.com/index.html

<!DOCTYPE html>  
<html>
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>window.name跨域</title>
</head>
<body >
    <iframe id="proxy" src="http://www.bbb.com/data.html" style="display: none;"  οnlοad="getData()"></iframe>
    <script>
        function getData(){
            var iframe = document.getElementById('proxy');
            iframe.onload = function(){ //覆盖掉载入时绑定的getData()函数
                var data = iframe.contentWindow.name;
                console.log(data); //data即为跨域获取到的window.name数据；
            }
            iframe.src = 'http://www.aaa.com/null.html';
        }
</script>
</body>
</html>

2、www.aaa.com/null.html

空页面，和 index.html 在同一域名下，为了让父页面能取到 iframe 的 window.name 值而存在。

3、www.bbb.com/data.html

准备传给 index.html 数据存放在 window.name字符串中

<!DOCTYPE html>  
<html>
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数据</title>
</head>
    <body >
        <!-- 页面其他内容 --> 
        <script>
            window.name = "somedata";//数据
        </script>
    </body>
</html>

Sparrowflying

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
window.name + iframe 跨域获取数据

【原理1】：window对象的name属性特征 —— name 属性可设置或返回存放窗口的名称的一个字符串，同一个浏览器窗口或同一个 iframe 载入的页面共享一个window.name。意思是只要你不关闭页面，仅仅改变网址的话， window.name 是不会变的，而且每一个打开的页面都能获取并修改 window.name 的值。【原理2】：父页面能够通过 iframe 的 contentWi...
复制链接

扫一扫

专栏目录