如何從iframe觸發父窗口函數a> href click，ionic2/angular2

Question

我目前正在開發ionic2應用程序。

在一個頁面離子我已經嵌入在iframe

<iframe id="iframeId" #iframe src="./epubpages/s006-Lesson-001.xhtml" width="100%" height="100%" (load)="onLoad()"></iframe> 

該頁面的.ts文件裏面

@ViewChild('iframe') iframe:ElementRef; 
onLoad() { 
console.log('me'); 

let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow; 
var h = doc.getElementsByTagName('a'); 
console.log(this.iframe.nativeElement.contentDocument.document); 
for(let i=0; i<h.length; i++){ 
    h[i].onclick = function(){ 
    window.parent['sayHello']; 
    } 
}} 
sayHello(){ 
    console.log("Saying Hello from "); 
} 

當我點擊頁面IFRAME鏈接，該功能可按SayHello的（），這是對父頁面沒有被調用。我不知道它是否可能，但這是我的要求觸發父頁面功能。

我正在使用ionic2。

Answer 1

我剛剛在github上遇到過這可能有所幫助。基本上尋找一個window.blur事件並使用它。下面是從GitHub代碼：

var myConfObj = { 
    iframeMouseOver : false 
} 
window.addEventListener('blur',function(){ 
    if(myConfObj.iframeMouseOver){ 
    console.log('Wow! Iframe Click!'); 
    } 
}); 

document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){ 
    myConfObj.iframeMouseOver = true; 
}); 
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){ 
    myConfObj.iframeMouseOver = false; 
}); 

我跑進一個Angular2應用了類似的問題，用下面的（如果其他Angular2用戶遇到這個問題）：

@Component({ 
    selector: 'my-selector', 
    host: { 
    '(window:blur)': 'myHandler($event)', 
    '(window:click)': 'myHandler($event)' 
    }, 
    ... 
}) 
... // rest of the component 

添加兩個'(window:blur)'和'(window:click)'有助於處理用戶在不屬於iframe的窗口中點擊其他位置的情況。

我希望這有助於！