javascript - 通过单击 IFrame(内联框架)中的项目，我需要路由到特定的 URL

Question

您好，我正在我的 Angular 2 应用程序的一个组件中使用 i 框架。

Component.ts

import { Component, OnInit } from '@angular/core';
import { SafeResourceUrl,DomSanitizer,} from '@angular/platform-browser';

@Component({
  selector: 'sample comp',
  templateUrl: './sample-comp.component.html',
  styleUrls: ['./sample-comp.component.css']
})
export class sampleComp implements OnInit {
  //DECLARATION
  webURL:SafeResourceUrl;
  constructor() { 

  }

  ngOnInit() {
  }
public onSelectid(){
  console.log('Router selected');

}
}
let greeter = new CampaignOrderComponent();
module FooModule {  
    export var FooInstance = new CampaignOrderComponent();
}

Component.html

<iframe src="http://sampleurl" width="100%" height="600" style="margin-top:-10px" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

在 i 框架上触发点击事件时，我需要路由到另一个组件。(我已经在根组件的路由文件中指定了该组件)。

现在在i框架应用程序内(一个mvc应用程序)我触发了一个点击函数

parrent.showme()

并在 Angular 2 应用程序的根文件夹中添加了index.js(与index.html链接)

index.js

  function showme()
  {
       alert('function called');
       FooModule.FooInstance.onSelectid();

  }

现在我可以通过单击 i 框架应用程序内部来在 Angular 2 应用程序页面上显示警报。

目标是更改 showme() 的功能以更改 Angular 2 应用程序的路线。

我该怎么做？

我尝试了多种方法来解决这个问题，不幸的是我无法得到任何结果。

Answer 1

将 id 添加到框架中，然后在 iframe 元素上使用 contentWindow.document.body.onclick

   <iframe id="iframe_id" src="https://sampleurl" style="margin-top:-10px" frameborder="1"
        webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>

 constructor(private _router: Router){
  } 
  ngAfterViewInit(){
    document.getElementById("iframe_id").contentWindow.document.body.onclick = 
      () => {
      this._router.navigate(['/yourChildRoute']);
      }


   }