在 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. Introduction to Razor Pages in ASP.NET Core

    https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/ 从ASP.NET Core 2.0.0版本之后,添加了新的特性Razor p ...

  2. （转）【经验之谈】Git使用之Windows环境下配置

    原文地址:http://www.cnblogs.com/xishuai/p/3590434.html 前言 安装 配置 关于git使用的几个问题 后记 关于代码托管,以前用过vss和svn,看博客或论 ...

  3. polymer-quick tour of polymer

    注册一个元素 <link rel="import" href="bower_components/polymer/polymer.html">//没 ...

  4. web项目开发最佳做法

    一个成熟的web项目应该具备以下基础代码或做法 1.前端基础框架: 统一的ajax 通信/表单提交及调用结果弹窗显示 统一的数据验证 统一的数据列表 2.后端基础框架: 统一的异常处理捕获,可针对具体 ...

  5. django model中的save()方法

    Model.save(force_insert=False, force_update=False, using=DEFAULT_DB_ALIAS, update_fields=None) id和pk ...

  6. c# .NET RSA结合AES加密服务端和客户端请求数据

    这几天空闲时间就想研究一下加密,环境是web程序,通过js请求后台返回数据,我想做的事js在发送请求前将数据加密,服务端收到后解密,待服务端处理完请求后,将处理结果加密返回给客户端,客户端在解密,于是 ...

  7. .net List方法属性及作用

    List的方法和属性 方法或属性 作用 Capacity 用于获取或设置List可容纳元素的数量.当数量超过容量时,这个值会自动增长.您可以设置这个值以减少容量,也可以调用trin()方法来减少容量以 ...

  8. 遇到问题-----cas4.2.x登录成功后报错No principal was found---cas中文乱码问题完美解决

    情况 我们之前已经完成了cas4.2.x登录使用MongoDB验证方式并且自定义了加密. 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密 但是悲剧的是 ...

  9. shell脚本报错：-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory

    当我们把文件从windows系统中编辑的文件拷贝到linux系统中,如果我们执行文件会保存如下的错: shell脚本报错:-bash: xxx: /bin/bash^M: bad interprete ...

  10. P4145 上帝造题的七分钟2

    题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是便有了对一段数中每个数都开平方(下取整)的操作. 第三分钟,k说,要能查询,于是便有了求一段 ...