通过单击IFrame（内联框架）中的项目，我需要路由到特定的URL

Question

Hi am using i frame in one component of my angular 2 application.

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>

While triggering a click event on i frame, i need to route to another component.(which i had already specified at my root component's routing file).

Right now inside the i frame app (a mvc app) i had triggered a click function

parrent.showme()

and added index.js on root folder of angular 2 app (linked with index.html)

index.js

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

  }

now i can show alert on the angular 2 app page via clicking inside the i frame app.

The target is to change the functionality of the showme() to change the route of the angular 2 app.

How can i do it ?

i had tried several methods to solve it, unfortunately i cant get any.

Answer 1

Add id to your frame and then use contentWindow.document.body.onclick on iframe element

   <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']);
      }


   }