情况
伴随着业务流程的发展趋势，当然地会有1些公共性的业务流程被抽离变成公共性组件共各个新项目应用。可是因为各个新项目用到的技术性栈都有一定的不一样，因此这个公共性组件就不可以便捷地被引入了。为处理这个难题，大家把这个组件写变成独立的网页页面挂到1个网站域名下，别的新项目选用iframe或webview的方法去载入这个网页页面，从而完成作用的简易复用。
但是这全过程中也造成了许多难题，单是跨域就会出現好几回了。下列我可能详细介绍我遇到的跨域难题和1些处理方式。
为何会跨域
以便确保客户信息内容的安全性，95年的情况下Netscape企业引进了同宗对策，里边的同宗指的是3个同样：协议书、网站域名、端口号。
违背了同宗对策就会出現跨域难题，关键主要表现为下列3层面：
情景
近期在做1个要求，必须用iframe引进1某些人封裝好的相近视頻播发器的物品。iframe里边有1个全屏的按钮，点一下后必须网页页面让iframe全屏，因为遭受同宗对策的限定，iframe没法告知网页页面全屏。
处理方法
设定domain
document.domain功效是获得/设定当今文本文档的初始域一部分，同宗对策会分辨两个文本文档的初始域是不是同样来分辨是不是跨域。这代表着要是把这个值设定成1样便可以处理跨域难题了。
在此我将domain设定为1级网站域名的值，a网页页面url为a.demo.com，a网页页面中iframe引入的b网页页面url为b.demo.com，实际设定为
document.domain = 'demo.com'
设定完以后，在a网页页面的window上挂载使iframe全屏的方式
// a网页页面
window.toggleFullScreen = () => {
// do something
}
在b网页页面上能够立即获得到a网页页面的window目标并立即启用
// b网页页面 window.parent.toggleFullScreen()
可是这个值的设定也是有1定限定，只能设定为当今文本文档的上1级域或是跟该文本文档的URL的domain1致的值。如url为a.demo.com，那domain就只能设定为demo.com或a.demo.com。因而，设定domain的方式只能用于处理主域同样而子域不一样的状况。
应用正中间网页页面
大家还能够应用1个与a网页页面同网站域名但不一样路由器的c网页页面做为正中间网页页面，b网页页面载入c网页页面，c网页页面启用a网页页面的方式，从而完成b网页页面启用a网页页面的方式。实际实际操作以下：
在a网页页面的node层新开1个路由器，此路由器载入1个c网页页面做为正中间网页页面，c网页页面的url为a.demo.com/c。c网页页面只是1个简易的html网页页面，在window的onload恶性事件上启用了a网页页面的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title></title>
</head>
<body>
<script>
window.onload = function () {
parent.parent.toggleFullScreen();
}
</script>
</body>
</html>
因为c网页页面和a网页页面是合乎同宗对策的，因此能够绕开跨域难题，实行全屏的方式。
postmessage
window.postMessage方式能够安全性地完成跨源通讯，写明总体目标对话框的协议书、主机详细地址或端口号便可以发信息内容给它。
// b网页页面
parent.postMessage(
value,
"http://a.demo.com"
);
// a网页页面
window.addEventListener("message", function( event ) {
if (event.origin !== 'http://b.demo.com') return;
toggleFullScreen()
});
以便安全性，收到信息内容后要检验下event.origin分辨是不是要收信息内容的对话框发过来的。
总结
根据以上的方式，大家便可以和iframe随意通讯啦。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 秀米制作h5_h5如何制作_h5小游戏制作_h5游戏开发_免费的h5制作网站 版权所有 （网站地图） 粤ICP备10235580号