Web页面的跨域问题产生原因是企图使用JS脚本读写不同域的JS作用域。问题根源来自JavaScript的同源策略：出于安全考虑，Javascript限制来自不同源的web页面JS脚本之间进行交互。否则就会出现各种获取用户私密数据的问题。

1、document.domain

它只能只能解决一个域名下的不同二级域名页面跨域，例如person.aa.com与book.aa.com，可以将book.aa.com用iframe添加到 person.aa.com的某个页面下,在person.aa.com和iframe里面都加上document.domain = "aa.com"。

2、Jsonp

Jsonp可以解决XmlHttpRequest请求不能跨域的限制，原理是通过动态创建一个<script> 元素来请求一段JS脚本，让这段脚本在页面作用域里执行，迂回实现类似Ajax的请求。

 //加载js文件

 function load_script(url, callback){

     var head = document.getElementsByTagName('head')[0];

     var script = document.createElement('script');

     script.type = 'text/javascript';

     script.src = url;

     script.onload = script.onreadystatechange = function(){

 if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){

             callback && callback();

             // Handle memory leak in IE

             script.onload = script.onreadystatechange = null;

             if ( head && script.parentNode ) {

               head.removeChild( script );

             }

         }

     };

     head.insertBefore( script, head.firstChild );

 }

3、用HTML5的API

HTML5提供了一个可以让我们跨域通信的API：postMessage，支持的浏览器有 Internet Explorer 8.0+, Chrome 2.0+、Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+。window.postMessage方法被调用时，目标窗口的message事件即被触发，这样可以实现不同域直接的信息交流。

假设A页面中包含iframe B页面

 var winB = window.frames[0];

 winB.postMessage('hello iframe', 'http://www.test.com');

 //B页面（监听message事件、获取信息）

 window.addEventListener('message',function(e){

 // ensure sender's origin

 if(e.origin == 'http://www.aa.com'){

     console.log('source: ' + e.source);

     console.log('Message Received: ' + e.data);

 }

 },false)

PS. 通信事件没有冒泡.

4、window.name

window.name一般用来获取子窗口：window.frames[windowName]；它有个重要特点：一个窗口无论加载什么页面，window.name都保持不变。而这个特点可以用来进行跨域信息传递。例如3个页面分别为A、B、C。A是主页面，里面嵌入了一个iframe：B页面。B页面对window.name进行赋值，接下来重定向到C页面。C页面在另外一个域里面，它的功能就是读取出B页面写入的window.name。

 <!-- A页面 -->

 <html>

 <head>

 <title> Page A</title>

 </head>

 <body>

     <iframe src=”B.html” />

 </body>

 </html>

 <!-- B页面 -->

 <html>

 <head>

 <title> Page B </title>

 </head>

 <body>

 <script language=”JavaScript”>

 var a = [];

 for (var i = 0;i < 10; i++){

     a.push(’xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’+i);

 }

 window.name= a.join(''); //写入window.name，这里可以写入一个比较大的值

 window.location.href = ‘http://www.cc.com/C.html’;

 </script>

 </body>

 </html>

 <!-- C页面 -->

 <html>

 <head>

 <title> Page C </title>

 </head>

 <body>

 <script language=”JavaScript”>

 document.write(window.name);//读出window.name，并写到页面上

 </script>

 </body>

 </html>

可以看到C页面正常输出了B页面写入的window.name。

web跨域通信问题解决的更多相关文章

  1. Web跨浏览器进程通信(Web跨域)

    Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现   在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实 ...

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

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

  3. 使用 JSONP 实现跨域通信

    简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...

  4. iframe跨域通信方案

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...

  5. JavaScript系列----AJAX机制详解以及跨域通信

    1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...

  6. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

  7. 使用JSONP实现跨域通信

    引语 Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.由于受到浏览器的限制,该方法不允许 ...

  8. Web 跨域请求(OCRS) 前端解决方案

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  9. 使用HTML5 的跨域通信机制进行数据同步

    离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...

随机推荐

  1. silverlight学习笔记——新手对silverlight的认识（1）

    这几天在搞silverlight.虽然silverlight没有前途,但始终是微软的一门技术,界面基本上与WPF共通,用一下也无妨. 学习过程并没有我原先想得那么容易,有些地方捣鼓了很久.究其原因,是 ...

  2. luogu2331 [SCOI2005]最大子矩阵

    题目大意 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠.1≤n≤100,1≤m≤2,1≤k≤10. 思路 #include < ...

  3. Google Deepmind AI tries it hand at creating Hearthstone and Magic: The Gathering cards

    http://www.techrepublic.com/article/google-deepmind-ai-tries-it-hand-at-creating-hearthstone-magic-t ...

  4. bzoj 4481 [ Jsoi 2015 ] 非诚勿扰 —— 期望

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4481 太弱了这种题都要看半天TJ...:https://blog.csdn.net/chai ...

  5. bzoj2120 数颜色——带修莫队

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2120 带修改的莫队: 用结构体存下修改和询问,排好序保证时间后就全局移动修改即可: 参考了T ...

  6. DCloud-MUI：窗口管理

    ylbtech-DCloud-MUI:窗口管理 通过预加载解决切页白屏问题,通过封装原生动画解决SPA模式的动画卡顿 1.返回顶部 1.页面初始化 在app开发中,若要使用HTML5+扩展api,必须 ...

  7. 判断ascii码是什么的函数

    function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && ...

  8. java常见面试题03-String,StringBuffer,StringBuilder的区别

    面试题   A:String,StringBuffer,StringBuilder的区别 1:String 内容不可变,StringBuffer.StringBudiler可变  2:StringBu ...

  9. B - Magnets

    Problem description Mad scientist Mike entertains himself by arranging rows of dominoes. He doesn't ...

  10. 【Leetcode】376. Wiggle Subsequence

    Description: A sequence of numbers is called a wiggle sequence if the differences between successive ...