Question

我目前正在使用ionic2 app。

在一个离子页面中，我嵌入了一个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的其他位置的情况。

我希望这有帮助！

如何从iframe触发父窗口函数a＆gt; href click，ionic2 / angular2

1 个答案: