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);

}