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

By clicking an item in IFrame (Inline Frame) i need to route to specific URL

本文关键字：路由 URL 项目 IFrame 单击 框架 一个      更新时间：2023-09-26

我在angular 2应用程序的一个组件中使用了i frame。

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>

当触发第1帧的click事件时，我需要路由到另一个组件。(我已经在根组件的路由文件中指定了)。

现在在i frame应用程序(mvc应用程序)，我触发了一个点击功能

parrent.showme()

并在angular 2应用的根目录下添加index.js(通过index.html链接)

index.js 

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

现在我可以在angular 2的应用页面上通过点击I帧应用来显示alert了。

目标是修改showme()的功能，以改变angular 2应用的路由。

我该怎么做?

我试了好几种方法来解决这个问题，可惜都没用。

为框架添加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']);
      }

   }
相关文章：