Angular 2 provides load event for iframe. So we can detect when new page loaded in iFrame. Normal src attribute of IFrame element gives only initial value. To get latest src URL, we have to use Iframe.contentWindow.location.href
Source Code         DEMO

Markup

myIframe represents iframe element. On load of new page, we are calling onLoadFunc
<iframe #myIframe (load)="onLoadFunc(myIframe)" src="frame2.html"></iframe>

Script - app.component.ts

Observe below onLoadFunc function 
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <h4>Detect IFrame Src Change</h4>
  <iframe #myIframe id="myIframe" (load)="onLoadFunc(myIframe)" src="frame2.html"></iframe>
  <h4> Current Source : {{source}}</h4>
  `
})
export class AppComponent {
  source: string = '';

  onLoadFunc(myIframe) {
    this.source = myIframe.contentWindow.location.href;
  }
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts