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


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';
  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;

1 comment:

  1. Hey! How can I resolved this error ? 'DOMException: Permission denied to access property "href" on cross-origin object'



Follow this blog by Email

Popular Posts