随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

JS 使用window.name跨域实践

Posted on   PHP-张工  阅读(11685)  评论(6编辑  收藏  举报

看了园友的 window.name实现的跨域数据传输

自己实践了一下,真的很好用。

特将具体实现方法记录如下:

如a.com网站想通过JS获取b.com网站的数据。

1 在a.com网站添加一个空HTML页。名称为:http://a.com/null.html

2 在a.com网站需要获取数据页面(如:http://a.com/getDomainData.html)内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>跨域获取数据</title>
    <script type="text/javascript">
    function domainData(url, fn)
    {
        var isFirst = true;
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        var loadfn = function(){
            if(isFirst){
                iframe.contentWindow.location = 'http://a.com/null.html';
                isFirst = false;
            } else {
                fn(iframe.contentWindow.name);
                iframe.contentWindow.document.write('');
                iframe.contentWindow.close();
                document.body.removeChild(iframe);
                iframe.src = '';
                iframe = null;
            }
        };
        iframe.src = url;
        if(iframe.attachEvent){
            iframe.attachEvent('onload', loadfn);
        } else {
            iframe.onload = loadfn;
        }
         
        document.body.appendChild(iframe);
    }
    </script>
</head>
<body>
 
</body>
    <script type="text/javascript">
    domainData('http://b.com/data.html', function(data){
        alert(data);
    });
    </script>
</html>

3 在b.com中添加获取数据页面 如:http://b.com/data.html 内容需包含:

 

<script>
  window.name = '需要跨域传递的数据';
</script>

4 访问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。

需要注意的地方

null.html 是必须的。内容可为空。

 iframe的onload事件绑定 必须这样写:

if(iframe.attachEvent){
     iframe.attachEvent('onload', loadfn);
} else {
     iframe.onload = loadfn;
}

调用domainData函数必须在body后面,或页面加载完后。

调用时会执行 http://b.com/data.html 页面的脚本。

编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示