在 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. Ansible运维自动化工具

    1>Ansible 1>ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabri ...

  2. Oracle E-Business Suite R12.2的新技术特点

    Oracle公司的系统研发开发与执行效率,让人不得不佩服.从2008年1月收购BEA到现在短短几年时间,就把Bea WebLogic产品融合到了Oracle公司自己的原研发产品之庞大的Oracle E ...

  3. Python入门基础学习 二

    Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...

  4. GlusteFS 二

    通过heketi提供的RestfullApi来管理 Gluster,进而与kubernetes集成.将gluster作为kubernetes的数据存储 1 安装 安装gluster 参见 Gluste ...

  5. MSP430 G2553 低功耗模式LPMx

    MSP430除了正常运行时的active模式外,还支持五种低功耗模式(Low-power mode),分别为LPM0.LPM1.LPM2.LPM3.LPM4,由状态寄存器中的CPUOFF.OSCOFF ...

  6. TSQL--NULL值和三值逻辑

    在SQL SERVER 中逻辑表达式存在三种值:TRUE+FALSE+UNKNOWN.UNKNOW可以理解为不确定,既不是TRUE又不是FALSE的表达式,主要由与NULL相关的逻辑判断引起,值为NU ...

  7. async异步方法

    在C# 中,可以使用asyc+await来完成一个异步方法. async用来标志一个使用了await的方法是非阻塞API,是一个异步方法,就当成一个普通关键字就行了.关键是await,await是配合 ...

  8. Solr（一） 安装部署环境

    Solr运行环境 第一步:安装java jdk 第二步:安装tomcat服务器 安装过程:参考http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4 ...

  9. Kafka与.net core（三）kafka操作

    1.Kafka相关知识 Broker:即Kafka的服务器,用户存储消息,Kafa集群中的一台或多台服务器统称为broker. Message消息:是通信的基本单位,每个 producer 可以向一个 ...

  10. 小白学Linux

    Linux的文件关系: / 根最大的文件夹,存储此台计算机的所有数据 /etc  存放计算机的配置文件 /var/log 存放电脑的日志文件 /home 家的位置 路径:相对路径.绝对路径(从根下开始 ...