什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口,只要其中一项不同就为跨域。
举几个例子:

  1. http://a.123.com/index.htmlhttp://a.123.com/index.js非跨域,它们有相同的域名,协议和端口。
  2. http://a.123.com/index.htmlhttp://b.123.com/index.js跨域,相同的端口、协议,但是域名不同(a.123.comb.123.com)。
  3. http://a.123.com:8080/index.htmlhttp://a.123.com:8081/index.js跨域,相同的域名、协议,但是端口不同(8080和8081)。
  4. http://a.123.com/index.htmlhttps://a.123.com/index.js跨域跨域,相同的域名、端口,但是协议不同(http和https)。

一,子向父传数据:

【发送消息】

otherWindow.postMessage(message, targetOrigin, [transfer])
  • otherWindow
    其他窗口的一个引用,写的是你要通信的window对象。
    例如在iframe中向父窗口传递数据时,可以写成window.parent.postMessage(),window.parent表示父窗口。
  • message
    需要传递的数据,字符串或者对象都可以。
  • targetOrigin
    表示目标窗口的源,协议+域名+端口号,如果设置为“*”,则表示可以传递给任意窗口。在发送消息的时候,如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。例如:
window.parent.postMessage('hello world','http://a.123.com:8080/index.html')

只有父窗口是http://a.123.com:8080时才会接受到传递的消息。

  • [transfer]
    可选参数。是一串和message 同时传递的 Transferable 对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。我们一般很少用到。

【接收消息】

window.addEventListener('message', function (e) {
console.log(e.data) //e.data为传递过来的数据
console.log(e.origin) //e.origin为调用 postMessage 时消息发送方窗口的 origin(域名、协议和端口)
console.log(e.source) //e.source为对发送消息的窗口对象的引用,可以使用此来在具有不同origin的两个窗口之间建立双向通信
})
 
iframe传递关闭命令
 
父窗口接收到命令将iframe关闭

二, 父向子传数据

共两个页面,

页面1:www.a.com/a.html 
页面2:www.b.com/b.html

实现目标:两个网站页面实现跨域相互通信 
当前例子依赖于 jQuery 3.0

页面代码:www.a.com/a.html

<iframe id="myIframe" src="http://www.b.com/b.html"></iframe>
<script>
var $myIframe = $('#myIframe');
// 注意:必须是在框架内容加载完成后才能触发 message 事件哦
$myIframe.on('load', function(){
var data = {
act: 'article', // 自定义的消息类型、行为,用于switch条件判断等。。
msg: {
subject: '跨域通信消息收到了有木有~',
author: 'CSDN-神神的蜗牛'
}
};
// 不限制域名则填写 * 星号, 否则请填写对应域名如 http://www.b.com
$myIframe[0].contentWindow.postMessage(data, '*');
}); // 注册消息事件监听,对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
if (e.data.act == 'response') {
alert(e.data.msg.answer);
} else {
alert('未定义的消息: '+ e.data.act);
}
}, false);
</script>

页面代码:www.b.com/b.html

<script>
// 注册消息事件监听,对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
if (e.data.act == 'article') {
alert(e.data.msg.subject);
// 向父窗框返回响应结果
window.parent.postMessage({
act: 'response',
msg: {
answer: '我接收到啦!'
}
}, '*');
} else {
alert('未定义的消息: '+ e.data.act);
}
}, false);
</script>

iframe中涉及父子页面跨域问题的更多相关文章

  1. 工作中遇到的js跨域问题总结

    起因:之前在做一个项目的时候有这样一个问题,127.0.0.1域名上的一个页面A.html,需要访问127.0.0.2域名上B.html页面中的一个方法.这就涉及到JS跨域访问了,通过查阅资料,得以解 ...

  2. 如何设置iframe高度自适应,在跨域的情况下能做到吗?

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载. ...

  3. django中同源策略和跨域解决方案

    一  同源策略 1.1何谓同源? 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同 ...

  4. spring boot 中通过CORS实现跨域

    一.跨域问题出现的原因 出现跨域问题的原因是同源策略. 同源策略 主要是三同:同协议.同域名.同端口, 同源策略目的 保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则cookie可以共享 ...

  5. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  6. 在ABP的Web层中实现复杂请求跨域访问

    在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在添加一个网站的验证码验证留言功能时,使用了Session ...

  7. Web API中使用CORS解决跨域

    Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 COR ...

  8. 使用document.domain和iframe实现站内AJAX跨域

    站内AJAX跨域可以通过document.domain和iframe实现,比如www.css88.com.js.css88.com.css88.com这3个域名其实是3个不同的域,很多时候www.cs ...

  9. layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ ...

随机推荐

  1. JS中正则表达式

    正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具.简单来说正则表达式就是处理字符串的,我们可以用它来处理一些复杂的字符串. 1.创建方式 pattern(模式):描述了表达式 ...

  2. 【WebSocket】WebSocket消息推送

    准备使用WebSocket实现Java与Vue或者安卓间的实时通信,实现私密聊天.群聊.查询下资料备用. WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接 ...

  3. Windows Server服务器之Linux server与windows server的区别

    Linux server与windows server的区别用linux做server,相对于windows server有什么优势? 首先,平均故障时间少,只要配置和使用得当,linux的平均故障( ...

  4. Agri-Net —poj1258

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44670   Accepted: 18268 Descri ...

  5. Python进阶:多线程、多进程和线程池编程/协程和异步io/asyncio并发编程

    gil: gil使得同一个时刻只有一个线程在一个CPU上执行字节码,无法将多个线程映射到多个CPU上执行 gil会根据执行的字节码行数以及时间片释放gil,gil在遇到io的操作时候主动释放 thre ...

  6. arcpy 常用操作

    目录: 通用操作 条件函数 前提: import arcpy from arcpy.sa import * 1.通用操作 设置工作路径:arcpy.env.workspace("path_o ...

  7. Map-Amap:货运解决方案

    ylbtech-Map-Amap:货运解决方案 1.返回顶部 1. http://lbs.amap.com/smart/truck/ 2. 2.返回顶部 1. 2. 3.返回顶部   4.返回顶部   ...

  8. jmeter添加自定义扩展函数之Strng---base64解密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  9. shell查词典

    curl http://cn.bing.com/dict/search?q=spawn -s | sed -e '{s/<\/span>/&\n/g}' | sed -n '{/& ...

  10. python post 发送字符串

    python post 发送一段字符串 把字符串写在表单里,表单用字典格式,字符串作value import requests data={key:str} r=requests.post(url,d ...