从iframe调用组件功能

我的窗口中有一个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 = ""
     ...
 }

 SampleFunction() {
  ...
 } 

}

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

同源Iframe

您可以安全地访问window.parent对象,因此您只需将您SampleFunction置于全局window对象中即可.

export class AppComponent {

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

 // use jquery to find the iframe and put a button into it
 addButtonToIFrame() {
     ...
     let buttonHtml = ""
     ...
 }

 SampleFunction() {
  ...
 }
} 

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"}
 }

}