Angular2+ iframe跨域调用父页面js

时间 2019-12-10

标签 angular2 angular iframe 调用页面栏目 AngularJS 繁體版

原文原文链接

业务场景：列表页面添加一个导入功能,该导入功能由第三方页面提供，导入完成后须要通知主列表刷新数据。javascript

先来看看iframe跨域调用父页面的实现逻辑(以postMessage方式为例)css

(postMessage介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage )html

1.父页面html html5

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
　　window.onload = function () {
　　//添加监听事件。
　　if (typeof window.addEventListener != "undefined")
　　　　window.addEventListener("message", func, false);
　　else if (typeof window.attachEvent != 'undefined')//兼容不支持addEventLinstener的IE。
　　　　window.attachEvent("onmessage", func);
}
　　//被调用的函数。
　　function invocationTarget(msg) {
　　　　if (msg)
　　　　　　alert(msg);
　　　　else
　　　　　　alert("~~~");
　　　　}
　　//监听事件回调函数。
　　function func(e) {
　　　　if (e.data.Result)
　　　　　　invocationTarget(e.data.Data);
　　}
</script>
</head>
<body>
　　<iframe src="子页面域名/HtmlPage.html" style="border:0px"></iframe>
</body>
</html>java

2. 子页面htmljson

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
　　<script type="text/javascript">
　　　　function invocation() {
　　　　　　var data = { Result: true, Data: 'hello world' };
　　　　　　//第一个参数表示要传递的参数，第二个参数表示要传递到的目标。
　　　　　　window.parent.postMessage(data, "父页面域名/HtmlPage.html");
　　　　}
　　</script>
</head>
<body>
　　<input onclick="invocation();" type="button" />
</body>
</html>跨域

以上逻辑是基于父页面是html实现的,见红色字体标注，子页面回调给指定的窗口源。浏览器

来看看postMessage参数说明：安全

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

1.data:要传递的数据，html5规范中提到该参数能够是JavaScript的任意基本类型或可复制的对象，然而并非全部浏览器都作到了这点儿，部分浏览器只能处理字符串参数，因此咱们在传递参数的时候须要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js能够实现相似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，因此能够不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，固然若是愿意也能够建参数设置为"*"，这样能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

到此就出现另外一个问题了：angular弹窗式组件如何经过URL反映？也就是如何把父页面集成到组件中。

由于组件和js通信是很好实现的，这样咱们能够设法把父页面嵌套在组件中(iframe方式嵌套)

UrlIframeModalComponent组件经过Iframe嵌套IframeModal.html父页面，IframeModal.html父页面经过Iframe嵌套第三方子页面 testurl/

1.UrlIframeModalComponent.html 组件(模态弹出）

</iframe>

UrlIframeModalComponent.ts

export class UrlIframeModalComponent implements OnInit {

constructor() { }

ngOnInit() {

　　//添加监听事件：监听由 IframeModal.html发出的callBackFromIframe事件

　　document.addEventListener('callBackFromIframe', this.callBack);

}

callBack(evt){

　　//回调参数

　　const param = evt.param;

　　console.log(param);

}

ngOnDestroy() {

　　document.removeEventListener("callBackFromIframe", this.callBack); //销毁监听,不然会屡次接收

}

2.IframeModal.html 父页面,与第三方子页面及UrlIframeModalComponent组件通信

<!DOCTYPE html>

<head>

　　window.onload = function () {

　　//添加监听事件。

　　if (typeof window.addEventListener != "undefined")

　　　　window.addEventListener("message", func, false);

　　else if (typeof window.attachEvent != 'undefined') //兼容不支持addEventLinstener的IE。

　　　　window.attachEvent("onmessage", func);

　　}

　　//被调用的函数。

　　function invocationTarget(param) {

　　　　//接收到子页面消息后，通知组件

　　　　var evt = document.createEvent("HTMLEvents");

　　　　evt.param = param;

　　　　evt.initEvent("callBackFromIframe", false, false);

　　　　parent.window.document.dispatchEvent(evt);

　　}

　　//监听事件回调函数。

　　function func(e) {

　　　　if (e.data.Result == true)

　　　　　　invocationTarget(e.data);

}

</script>

</head>

<body>

</body>

</html>

3.第三方子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

这是第三方页面功能...

(导入文件功能)

<br />

</div>

function notifyBack(msg) {

var data = {

Result: true,

Data: msg

};

//第一个参数表示要传递的参数，第二个参数表示要传递到的目标。

window.parent.postMessage(data, "http://localhost:4200/assets/IframeModal.html");

}

</script>

</body>

</html>