引起跨域的原因：

浏览器的同源策略，但是当你要发送请求的时候，出于安全性问题，浏览器有严格的要求，必须协议，域名，端口都相同，这个就是同源策略。

影响：a通过js脚本向b发送ajax请求，不同源就会报错

不受影响：script标签，img标签等外部资源引用，重定向，表单提交都不受影响

****iframe遇到的跨域问题****

情况一、假设有a.com/main.html ;  a.com/b.html

这种情况是涉及不到跨域的

main.html代码：

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div class="box">

		<iframe id="if" src="b.html" frameborder="0"></iframe>

	</div>

<script>

    //获取b的数据

    var bdoc = window.frames[0].document;

    //通过bdoc做操作

</script>

</body>

</html>

b.html代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<input id="message" type="text" />

	<script>

                //获取父窗docuemnt

		var pdoc = parent.document;

	</script>

</body>

</html>

情况二、假设有a.com/main.html ;  b.a.com/b.html 此时主域相同子域不同

只需要在两个页面同时显式的设置docuement.domian = “a.com”即可

情况三、主域不同 假设有页面 a.com/main.html  ;   a.com/blank.html ;   b.com/b.html

此时可以利用window.name实现消息传递，具体做法如下：

b.html代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<input id="message" type="text" />

	<script>

         window.name = "我是要传递的消息";

        </script>

</body>

</html>

a.html代码：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div class="box">

        <iframe id="if" src="b.com/b.html" frameborder="0"></iframe>

    </div>

<script>

    var fr = document.getElementById('if'),

        state = 0;;

        if(window.VBArray){//兼容ie

            fr.onreadystatechange = function(){

                if(this.readyState == 'complete'){

                    if(state == 1){

                        // 获取数据

                        data = fr.contentWindow.name;

                    }else{

                        state = 1;

                        // 重置iframe窗口的src保证同源

                        fr.src = 'a.com/blank.html';

                    }

                }

            }

        }else{

            fr.addEventListener('onload',function(){

                if(state == 1){

                    // 获取数据

                    data = fr.contentWindow.name;

                }else{

                    state = 1;

                    // 重置iframe窗口的src保证同源

                    fr.src = 'a.com/blank.html';

                }

            },false);

        }

</script>

</body>

</html>

注意：window.name最大存储2M，只能存储字符串格式。由于此方法会重新加载空页面作为iframe的源，所以只适用于隐藏iframe的情况

****还有一种方式通过document.hash****

由父窗口修改子窗口的src添加hash，hash就是要传递的数据，修改hash不会导致页面刷新，子窗口通过一个定时器，定时检测hash是否变化，从而获取父窗口给的数据。

*****Jsonp跨域****

jsonp跨域原理：假设有a.com/a.html ;

,原理：动态创建script标签，利用script标签src不受同源策略影响

在页面定义处理数据的函数，参数就是要处理的数据，有后台返回一段js代码，这段代码必须调用a重定义的函数，将返回数据放在参数里

a.com/a.html代码：

funciton dealData(data){
    //处理数据
}
var script = document.createElement("script");

    script.src = "https://b.com/ask?data=1&callback=dealData";

    document.body.insertBefore(script, document.body.firstChild);

此时后台返回的不是一般意义上的数据，而是一段script代码，这段代码调用我们的回调函数　　

由于是通过src来发出请求的，所以jsonp只能是get请求

****利用h5的api postMessage跨域****

假设有a.com/main.html ;  b.a.com/b.html

这种方法一方通过postMessage向另一方发送消息，另一方通过onmessage事件获取到消息

postMessage(发送消息内容，发送目的地)

onmessage事件通过event.data获取消息

详细语法可以参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

a.com/main.html代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.box{width:800px;height:400px;background:#ccc;}

	</style>

</head>

<body>

	<div class="box">

		<iframe id="if" src="message.html" frameborder="0"></iframe>

	</div>

	<script>

	window.onload = function(){

		window.frames[0].postMessage('parent','http://b.com/b.html');

	}

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

        var color=e.data;

        console.log(color)

    },false);

	</script>

</body>

</html>

b.html代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<input id="message" type="text" />

	<script>

	document.getElementById('message').value=111;

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

		alert(1)

		console.log(e.data);

		document.getElementById('message').value=e.data;

		window.parent.postMessage(e.data,'*');

	},false);

	</script>

</body>

</html>

****利用Cors跨域，这个方式需要后台配合设置header****

js 跨域复习 window.name | window.domain | iframe | Jsonp的更多相关文章

  1. window.opener方法的使用 js跨域

    原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...

  2. window.opener方法的使用 js 跨域

    用到了这个方法: window.opener.location.reload() 与 window.opener.location.href=window.opener.location.href 都 ...

  3. JS跨域--window.name

    JS跨域--window.name:https://www.jianshu.com/p/43ff69d076e3

  4. JS跨域：jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  5. JS跨域解决方式 window.name

    window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等 ...

  6. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  7. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  9. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. Maven的配置地址

    http://howtodoinjava.com/tools/eclipse/how-to-import-maven-remote-archetype-catalogs-in-eclipse/ htt ...

  2. lnmp 环境require(): open_basedir restriction in effect 错误

    最近配置开发用的lnmp环境,环境配置完成后,爆500错误,查看nginx错误日志 open_basedir 将 PHP 所能打开的文件限制在指定的目录树,包括文件本身 错误日志显示,访问脚本不在 o ...

  3. android的DrawerLayout用法

    DrawerLayout的关键点(我认为的)就在于layout文件的layout_gravity属性的值,只有左右,两种选择,不能从上下滑出来,就算有这个效果也不是这个套路弄出来的. <?xml ...

  4. XtraBackup备份mysql5.1.73

    一.基础介绍 mysql5.1在源码中配备了两个版本的innodb存储引擎源码:innobase和innodb_plugin,编译安装的时候可以通过参数--with-plugins=innobase, ...

  5. MySQL复制经常使用拓扑结构具体解释

    复制的体系结构有下面一些基本原则: (1)    每一个slave仅仅能有一个master: (2)    每一个slave仅仅能有一个唯一的serverID: (3)    每一个master能够有 ...

  6. python 基础 9.9 查询数据

      #/usr/bin/python #-*- coding:utf-8 -*- #@Time   :2017/11/24 4:21 #@Auther :liuzhenchuan #@File   : ...

  7. lua注册函数

    #include <stdio.h> #include <math.h> #define MAX_COLOR 255 extern "C" { #inclu ...

  8. 洛谷P1073 最优贸易==codevs1173 最优贸易

    P1073 最优贸易 题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一 ...

  9. WebApi 中使用 Session

    1. 在 Global.asax.cs 文件中加入session支持 protected void Application_Start() { AreaRegistration.RegisterAll ...

  10. 查看Android.mk文件中的变量的值

    当某个Android.mk中包含如下: LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_C_INCLUDES += \ $(LOCAL ...