使用windows.name解决js跨域数据通信

最新推荐文章于 2023-05-15 17:34:42 发布
最新推荐文章于 2023-05-15 17:34:42 发布
阅读量982 收藏
点赞数
分类专栏： JavaScript&Ajax&jQuery 文章标签： js跨域 window.name
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tao_627/article/details/42971797
版权

下面是参考文献[1]的一个实践验证，测试环境略有修改，记录如下：

测试场景：从网站A中的网页去获取网站B中网页的数据

下面以news.sina.com.cn和news.163.com这两个站点为例，将如下网页都放到Nginx服务器根目录下面的子目录taoyx-test下面：

PageA.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>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<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://news.sina.com.cn/taoyx-test/PageNull.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://news.163.com/taoyx-test/PageB.html', function(data){
        alert(data);
    });
    </script>
</html>

PageNull.html内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Windows.name变量测试</title>
<link rel="shortcut icon" href="http://t10.baidu.com/it/u=4094539827,178906815&fm=58" />
</head>
<body>
</body>
</html>

PageB.html内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Windows.name变量测试</title>
<link rel="shortcut icon" href="http://t10.baidu.com/it/u=4094539827,178906815&fm=58" />
</head>
<body>
<script>
　　window.name = '需要跨域传递的数据: cross-domain data，======= 雪峰流云！========';
</script>
</body>
</html>

为了创造两个域名的环境，可以在hosts文件中添加如下域名：
10.10.110.149   news.sina.com.cn
10.10.110.149   news.163.com

在chrome中打开如下链接，
得到如下效果图

注意事项：

1.PageNull.html 是必须的。内容可为空。
2.iframe的onload事件绑定 必须这样写：
if(iframe.attachEvent){
     iframe.attachEvent('onload', loadfn);
} else {
     iframe.onload = loadfn;
}
3.调用domainData函数必须在body后面，或页面加载完后。调用时会执行 http://news.163.com/taoyx-test/PageB.html 页面的脚本。

参考文献

[1].http://www.cnblogs.com/zjfree/archive/2011/02/24/1963591.html

雪峰流云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript使用window.name解决跨域问题第1/2页
10-30
JavaScript中的`window.name`属性是一个独特且强大的工具，尤其在处理跨域通信时。它不受同源策略的限制，可以在不同页面甚至不同域名之间保持其值。这是因为`window.name`的值在页面重载或导航至其他URL时仍然保留...
PHP下ajax跨域的解决方案之window.name实例分析
10-15
下面我们将通过实例来分析如何利用`window.name`实现跨域通信。 首先，假设我们有两个网站，`www.a.com`和`www.b.com`，目标是在`www.a.com/a.html`中获取`www.b.com/data.html`的数据。 1. **www.b.com/data.html...
跨域解决方法之window.name
小白变怪兽
02-24 1万+
window.name 跨域请求 方法
跨域
adrt7819的博客
08-13 87
同源策略：端口　域名　协议 1 Jsonp <script> var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'www.baidu.comn&callback=showMessage'...
js跨域的解决方案
muzidigbig的博客
05-15 1万+
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
js 跨域（JSONP/CORS/WebSocket/postMessage/location.hash/document.domain/window.name）
青蛙king的博客
06-10 1279
一、跨域 1、不符合同源策略的通信就是跨域 同源策略：同端口、同域名、同协议。 二、解决跨域 1、反向代理 2、CORS CORS 使用自定义的 HTTP 头部让浏览器与服务器进行沟通 使用 CORS 跨域时，在 Ajax 请求时要自定义HTTP 的请求头 Origin，Origin 包含请求页面（当前页面）的源信息——协议、域名和端口。比如： // ajax 中设置 HTTP 的请求头 Origin: http://www.test.net 服务器端对于CORS的支持，主要..
window.name属性详解（Javascript）
qq572069832的博客
11-17 1万+
关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined 但是偏偏就个别特例，就是name属性 其实window自身就带有name这个属性，在控制太输入window可以可以看到 打开往下翻就可以找到 window.name直译过来是窗口名字，主要用于为超链接和表单设置目标（targets），什么意思呢，我们做个案例 建立两个网页 第一个 <!DOCTYPE html&g
JavaScript使用HTML5的window.postMessage实现跨域通信例子
01-21
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多： 1.document.domain+iframe的设置，应用于主域相同而子域不同； 2.利用iframe和location.hash，数据直接暴露在了url中，数据容量和...
js跨域通讯
weixin_34077371的博客
10-28 121
为什么80%的码农都做不了架构师？>>> ...
find+xargs+sed批量替换
IT小小鸟
11-17 1万+
写代码时经常遇到要把 .c  和 .h的文件中的某些内容全部替换的情况，用sourceinsight 进行全局的查找是一个方法，但是sourceinsight只能替换一个文件中的字符串，不能同时替换多个文件中的同一个字符，在linux下 使用find，结合sed，xargs 可以实现这个功能。 把当前目录下的所有.c 和 .h 文件中的 "waf"字符 全部 替换成 “tamper” find
JavaScript 跨域通信方法
04-26
JavaScript 父子页面跨域通信的方法
关于html5的PostMessage的用法总结
热门推荐
海棠花未眠的博客
07-07 4万+
    大家都知道，网页直接传递数据可以使用ajax请求来完成，今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢？首先，postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢？这里我把一个案例分享出来把。看下面的代码：test.html&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;titl...
xargs sed 批量替换文件内容
壹龙的专栏
09-19 1万+
sed 批量替换文件内容Linux下批量替换多个文件中的字符串的简单方法。用sed命令可以批量替换多个文件中的字符串。 用sed命令可以批量替换多个文件中的 字符串。 sed -i "s/原字符串/新字符串/g" `grep 原字符串 -rl 所在目录`例如：我要把mahuinan替换 为huinanma，执行命令： sed -i "s/mahuinan/huinanma/g" `grep mah
sed、xargs 命令
SJLin
09-07 5690
这两天笔试做了一道题，要我找到当前目录下所有xml文件，并且把里面的hello替换为world。找到所有xml好办，find命令就好，但怎么替换里面的内容就一脸懵逼了。然后今天查了下，看到可以用sed或者xargs命令，所以就学了一下。 一. sed sed是一种流编辑器，它是文本处理中非常中的工具，能够完美的配合正则表达式使用，功能不同凡响。处理时，把当前处理的行存储在临时缓冲区中，称为...
js 简单使用postMessage iframe跨域通信
leveretz的博客
11-08 575
js 简单使用postMessage iframe跨域通信
js中几种实用的跨域方法原理详解
萌萌的It人 www.itmmd.com
07-15 2451
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题，我们可以使用以下几种方法： 一、通过jsonp
javascript跨域通信
橙煦媛的博客
03-02 365
1.CORS CORS（Corss-Origin Resource Sharing,跨资源共享），基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部决定是否给予响应。 2.document.domain 将页面的document.domain设置
用window.name来解决不同网页间的数据通信
标子 的专栏
10-20 1033
今天有个同事问到如何在原网页和被打开的网页中进行数据通信，用这里说一下用window.name的解决方法。 a.html<!doctype html> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript" src="jquery-1.10.2.js"><
js中window对象
w18625653380的博客
09-28 1712
window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性当作全局变量来使用。例如，可以只写document，而不必写window.document。defaultStatus：设置或返回窗口状态栏的默认文本。（仅Poera支持）document：对Document对象的只读引用。innerheight：返回窗口的文档显示区的高度。
vue 中跨域解决方式
最新发布
05-30
2. 通过代理解决跨域问题：在 Vue 的 `config/index.js` 中配置代理，将请求转发到本地的服务端，再由服务端进行真正的请求。这种方式不需要服务端的支持，但需要在本地搭建一个服务端。示例代码如下： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值