在 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. UVaLive 4043 Ants (最佳完美匹配)

    题意:给定 n 个只蚂蚁和 n 棵树的坐标,问怎么匹配使得每个蚂蚁到树的连线不相交. 析:可以把蚂蚁和树分别看成是两类,那么就是一个完全匹配就好,但是要他们的连线不相交,那么就得考虑,最佳完美匹配是可 ...

  2. 安装及运行 RabbitMQ 服务器 （windows）

    1. 一些网址 http://www.rabbitmq.com/ http://www.rabbitmq.com/install-windows.html http://www.rabbitmq.co ...

  3. （广搜）可口可乐 -- hdu -- 1495

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1495 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  4. Groovy 读取json文件，并用gson反序列化为List集合

    Groovy 读取json文件,并用gson反序列化 package com.bicycle.util import bicycle_grails.StationInfo import com.goo ...

  5. 23 DesignPatterns学习笔记：C++语言实现 --- 1.1 Factory

    23 DesignPatterns学习笔记:C++语言实现 --- 1.1 Factory 2016-07-18 13:03:43 模式理解

  6. leancloud js SDK 学习

    测试页面 AV.initialize("id", "key"); var TestObject = AV.Object.extend("TestObj ...

  7. D3 datum()

    datum()和data()功能类似. datum():将指定数据赋值给被选择元素.data():将数据数组与选择集的元素结合. var p = d3.selectAll('p'); p.datum( ...

  8. [转]RTH试用手记之“额外功能”

    年初,罗德与施瓦茨公司(Rohde & Schwarz)推出了第一款的手持示波器,从指标上看,该示波器打破了传统手持器功能简单.指标水平低.结构粗糙的印象,取而代之达到了主流台式数字示波器的性 ...

  9. Linux Socket - 内核非阻塞功能

    select 函数 int select(int maxfdp,fd_set *readfds,fd_set *writefds,fd_set *errorfds,struct timeval*tim ...

  10. 2：C#TPL探秘

    理论: 1. 只要方法是 Task类型的返回值,都可以用 await 来等待调用获取返回值. 2. 如果一个返回 Task类型的方法被标记了 async,那么只要方法内部直接 return T 这个 ...