iframe通讯

IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

跨域通讯原则

说明 是否允许通信
http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端口 不允许
http://www.a.com/a.jshttps://www.a.com/b.js 同一域名,不同协议 不允许
http://www.a.com/a.jshttp://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.jshttp://script.a.com/b.js 主域相同,子域不同 不允许
http://www.a.com/a.jshttp://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.jshttp://www.a.com/b.js 不同域名 不允许

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。 “URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

我的解决方案是:document.domain+iframe的设置

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。

同域名通讯

//父页面获取子页面元素
let  iframeHeight=$("#iframeName").contents().height();
$("#iframeName").contents().find(".sfbtn").text()
$("#iframeName").contents().find(".sfbtn").text("ccc")


//子页面获取子页面元素
parent.$(window.parent.document).find(".layui-layer-max").click()

跨域通讯 Iframe


//跨域传参
window.onload=function(){
     window.frames[0].postMessage('getcolor','http://lslib.com');
}

//跨域接收
window.addEventListener('message',function(e){
                if(e.source!=window.parent) return;
                varcolor=container.style.backgroundColor;
                window.parent.postMessage(color,'*');
 },false);
Licensed under 京ICP备17003353号-3