从iframe调用组件功能

Question

我的窗口中有一个iframe，我用jquery添加了新的按钮。在迁移到angular2之前，我使用parent.SampleFunction（）从iframe调用父函数。现在，parent是一个角度组件，它不起作用。

export class AppComponent {

 // use jquery to find the iframe and put a button into it
 addButtonToIFrame() {
     ...
     let buttonHtml = "<button onClick='parent.SampleFunction()'></button>"
     ...
 }

 SampleFunction() {
  ...
 } 

}

如何更改onclick功能以访问父级？

Answer 1

同源Iframe

您可以安全地访问window.parent对象，因此您只需将SampleFunction放在全局window对象中。

export class AppComponent {

 constructor(){
  (<any>window).SampleFunction= this.SampleFunction.bind(this);
 }

 // use jquery to find the iframe and put a button into it
 addButtonToIFrame() {
     ...
     let buttonHtml = "<button onClick='parent.SampleFunction()'></button>"
     ...
 }

 SampleFunction() {
  ...
 }
} 

如果您有多个同一个班级的实例且SampleFunction处理组件状态，则可能需要为SampleFunction创建随机名称。

你也可以使用PostMessage API，这应该是一个更灵活的选择。

PostMessage API

如果您正在处理来自其他域的iframe，则可以使用PostMessage API：

iframe内的

脚本

window.parent.postMessage({foo:"foo"});

父母内部的

组件

export class AppComponent {

 @HostListener("window:message",["$event"])
 SampleFunction($event:MessageEvent) {
  if (event.origin !== "protocol://my-expected-domain.tdl:port")
    return;
  console.log($event.data)// {foo:"foo"}
 }

} 

当然，您必须针对iframe的实际域检查event.origin。