www.qjdy.com-奇迹赌场 > 佳美特设计 > 当页面使用跨域iframe链接时

原标题:当页面使用跨域iframe链接时

浏览次数:156 时间:2019-07-11

是因为web同源计策的限量,当页面使用跨域iframe链接时,主页面与子页面是力不能支交互的,那对页面间的音信传递形成了十分的大的分神,经过一多元的尝尝,最终自身意识有以下方法可以兑现:

1. 子页面url传参

大致说来正是把具有必要传递的参数加到与主页面同源的url上,将子页面重定向到该url,然后主页面通过iframe的src获取这一个参数

进程特别复杂,不提议选取这种办法

2. postMessage()

postMesssage()是HTML5提供的贰个遵照事件的消息传输API,能够兑现跨文本档、多窗口、跨域信息传递。

postMessage(data,origin)方法接受多个参数

1.data:要传递的数量,html5正规中关系该参数能够是JavaScript的随机基本类型或可复制的目的,然则并不是持有浏览器都做到了这一点儿,部分浏览器只好处理字符串参数,所以大家在传递参数的时候须求利用JSON.stringify()方法对目的参数体系化,在低版本IE中援引json2.js方可兑现类似意义。

2.origin:字符串参数,指活血标窗口的源,协议 主机 端口号[ URL],U瑞虎L会被忽视,所以能够不写,这一个参数是为了安全思考,postMessage()方法只会将message传递给钦命窗口,当然如若愿意也能够建参数设置为"*",那样能够传递给自由窗口,若是要钦命和当下窗口同源的话设置为"/"。

出殡消息(子页面)

function sendMessage(param) {
var url;
if (param.url) {
url = param.url;
};
var dataJson = JSON.stringify({     type:1,  
a: param.c, b: param.c,
c: param.c,
url: url
});
window.parent.postMessage(dataJson, '*');
}

出于一些浏览器只能管理字符串参数,大家需求先选用JSON.stringfy()将参数调换为字符串,然后再抽取页面使用JSON.parse()转换回对象。

接过音信

对此子页面传递过来的参数,我们能够透过监听window的message事件来获取:

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
case 1:
alert(data.a);break;
}
}, false); 

message事件有多少个关键性质

1.data:以偏概全,是传递来的message

2.source:发送音讯的窗口对象

3.origin:发送消息窗口的源(协议 主机 端口号)

经过postMesssage()方法和message事件就能够完毕跨域传递音信了,要求专注的是,在demo中我们是通过子页面向父页面传递新闻,所以利用的是window.parent发送,window接收:

window.parent.postMessage(dataJson, '*');

若是是从主页面向子页面就须要对换,使用window发送,window.frames[0]来接过了。

如上内容是小编给大家介绍的行使postMesssage()达成iframe跨域页面间的新闻传送,希望对大家有所补助!

您可能感兴趣的篇章:

  • 行使postMesssage()完结跨域iframe页面间的音信传递格局
  • js iframe跨域访问(同主域/非同主域)分别深深介绍
  • 跨域传值即主页面与iframe之间相互传值
  • 动用iframe实现ajax跨域通讯的贯彻原理(图解)
  • IFrame跨域高度自适应实现代码
  • 什么设置iframe中度自适应在跨域意况下的可用方法
  • 关于Iframe怎么样跨域访谈Cookie和Session的消除方法
  • js跨域难题之跨域iframe自适应大小达成代码
  • iframe跨域与session失效难题的消除办法
  • 至于iframe跨域POST提交的不二法门言传身教

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:当页面使用跨域iframe链接时

关键词:

上一篇:www.qjdy.com当图片滑到最后一张时

下一篇:没有了