在 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. 设置手机iphone5s邮件

    由于更新系统后,手机自带的邮件服务器老是报错,后来查一下,需要设置qq邮箱独立密码,http://jingyan.baidu.com/article/c146541354cefb0bfdfc4c5d. ...

  2. Centos 7 搭建wordpress

    1.安装mysql 详情见:http://www.cnblogs.com/jw35/p/6044170.html 2.关闭firewalld与selinux systemctl stop firewa ...

  3. GNOME桌面的安装

    首先搭建yum仓库 http://www.cnblogs.com/jw35/p/5967677.html yum grouplist                     #列出yum仓库里的软件组 ...

  4. CGLIB实现动态代理

    JDK动态代理和CGLIB字节码生成的区别? * JDK动态代理只能对实现了接口的类生成代理,而不能针对类 * CGLIB是针对类实现代理,主要是对指定的类生成一个子类,覆盖其中的方法   因为是继承 ...

  5. Javascript Promises 介绍

    什么是 Promises Promises是一种关于异步编程的规范,目的是将异步处理对象和处理规则进行规范化,为异步编程提供统一接口.   传统的回调函数 说到JavaScript的异步编程处理,通常 ...

  6. [Elixir006]CSV(Comma-separated values)处理

    1. CSV文件格式是什么 CSV有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本).纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数 ...

  7. Tempdb--Allocation Bottleneck

    Alloctaion bottleneck refers to contention in the system pages that store allocation structures. PFS ...

  8. （zxing.net）二维码QR Code的简介、实现与解码

    一.简介 二维码QR Code(Quick Response Code)是由Denso公司于1994年9月研制的一种矩阵二维码符号,它具有一维条码及其它二维条码所具有的信息容量大.可靠性高.可表示汉字 ...

  9. 转载WPF:创建你的第一个WPF项目

    转载:http://www.cnblogs.com/pengjinyu/archive/2009/08/19/1549845.html

  10. GO学习笔记 - 变量在定义时没有明确的初始化时会赋值为“零值 ”。

    官方教程:https://tour.go-zh.org/basics/12 变量在定义时没有明确的初始化时会赋值为 零值 . 零值是: 数值类型为 0 , 布尔类型为 false , 字符串为 &qu ...