在 http://www.cnblogs.com/zhuzhenwei918/p/6759459.html 这篇文章中，我提到了几种跨域的方式，这里主要讲解使用window.name实现跨域。

　　 跨域就是说必须同协议、域名、端口号，我们才能获取其内容，对其进行访问。

　　window.name这个属性不是一个简单的全局属性 --- 只要在一个window下，无论url怎么变化，只要设置好了window.name，那么后续就一直都不会改变，同理，在iframe中，即使url在变化，iframe中的window.name也是一个固定的值，利用这个，我们就可以实现跨域了。

　　下面是localhost:8088/test2.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>test2</title>

</head>

<body>

  <h2>test2页面</h2>

  <script>

    var person = {

      name: 'wayne zhu',

      age: ,

      school: 'xjtu'

    }

    window.name = JSON.stringify(person)

  </script>

</body>

</html>

　　即我们希望吧test2.html中的数据传递出去，到localhost:8081/test1.html中去。

　　下面是localhost:8081/test1.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>test1</title>

</head>

<body>

  <h2>test1页面</h2>

  <iframe src="http://localhost:8088/test2.html" frameborder=""></iframe>

  <script>

    var ifr = document.querySelector('iframe')

    ifr.style.display = 'none'

    var flag = ;

    ifr.onload = function () {

        if (flag == ) {

            console.log('跨域获取数据', ifr.contentWindow.name);

            ifr.contentWindow.close();

        } else if (flag == ) {

            flag = ;

            ifr.contentWindow.location = 'http://localhost:8081/proxy.html';

        }

    }

  </script>

</body>

</html>

这里的意图很明确，就是使用iframe将test2.html加载过来，因为只是为了实现跨域，所以将之隐藏，但是，这时已经完成了最重要的一步，就是将iframe中window.name已经成功设置，但是现在还获取不了，因为是跨域的，所以，我们可以把src设置为当前域的proxy.html。

　　另外，这里之所以要设置flag，是因为每当改变location的时候，就会重新来一次onload，所以我们希望获取到数据之后，就直接close()，故采用此种方法。

这个proxy.html内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>proxy</title>

</head>

<body>

  <p>这是proxy页面</p>

</body>

</html>

　　是的，什么都没有，当然，我们也可以把src就替换成test1.html，但是这样的坏处很明显，就是需要把test1.html中的数据加载一遍，这不是我们所希望的。

　　

　　

　　OK！ 这样，就成功完成了跨域！

　　代码： https://github.com/zzw918/cross-origin

　　

　　

　　

　　

　　

　　如我们希望localhost:8081/test1.html可以访问到localhost:8088/test2.html中的数据，正常来说，由于跨域，这一定是不可能的，一般的实现思路可以是这样的。

window.name实现跨域的更多相关文章

  1. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  2. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  3. 使用ADMT和PES实现window AD账户跨域迁移-介绍篇

    使用 ADMT 和 pwdmig 实现 window AD 账户跨域迁移系列: 介绍篇 ADMT 安装 PES 的安装 ADMT:迁移组 ADMT:迁移用户 ADMT:计算机迁移 ADMT:报告生成 ...

  4. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  5. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  6. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  7. window.name实现跨域数据传输

    偶然间碰到个问题,通过JS给window.name赋值数组情况下,在firefox与chrome下会转换为字符串类型,在IE11下则显示正常.不说了,上图(firefox下): 代码: <scr ...

  8. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  9. window.postMessage()实现跨域消息传递

    window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值), ...

随机推荐

  1. 阿里云OSS-js分片上传

    使用 aliyun-oss-sdk-4.4.4.min.js 方式一 客户端授权 https://help.aliyun.com/document_detail/32069.html 通过new OS ...

  2. ubuntu解压文件命令大全

    ubuntu 下rar解压工具安装方法: 压缩功能 安装 sudo apt-get install rar 卸载 sudo apt-get remove rar 解压功能 安装 sudo apt-ge ...

  3. 中心极限定理&&正态分布 随想

    0-前言 笔者本来周末约好朋友出去骑行,不料天公不作美!哎,闲来无事来到了实验室,本来打算看看<天天向上>,而这一期又实在不好看(偶像剧).只好来做做一些小实验,脑海里突然想到“正态分布“ ...

  4. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  5. Windows服务器管理与优化

    一.服务器自动重启windows服务器运行时间长了,内存会爆满,比如数据库会缓存大量的数量,IIS进程也会缓存数据而没有及时释放.这样需要定时重启服务器来释放内存. 创建任务计划,如在 每周一/周三/ ...

  6. 利用反射(Reflection)处理对象

    创建一个学生类: public class Student { public int Id { set; get; } public string Name { set; get; } public ...

  7. Atom打造优雅的MarkDown 编辑器

    1.下载Atom https://atom.io/ 2.安装Atom 双击自动安装,会默认安装到C盘,无法修改. 3.安装simplified-chinese-menu 插件 这是一个可以将软件汉化的 ...

  8. 【转】Sql Server去除所有空格

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak 1.普通空格: 前后的空格,使用LT ...

  9. 瞄一眼，带你走进SparkSQL的世界

    本文由  网易云发布. 作者:范欣欣(本篇文章仅限知乎内部分享,如需转载,请取得作者同意授权.) 最近想来,大数据相关技术与传统型数据库技术很多都是相互融合.互相借鉴的.传统型数据库强势在于其久经考验 ...

  10. Ubuntu add-apt-repository: command not found

    在Ubuntu下,时不时会有这个错误的. add-apt-repository: command not found 这个是缺少程序,安装一下就可以了.只是不知道安装的名字. 按以下命令走一趟就可以的 ...