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
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; } }
Hey! How can I resolved this error ? 'DOMException: Permission denied to access property "href" on cross-origin object'
ReplyDeleteI am In same problum
DeleteThis happens when your iframe domain and parent document aren't on the same origin (Not using the same protocol, port or domain). it's how modern browsers are built to prevent any malicious activity through iframes. The only way to solve it is to get them on the same domain, use postMessage to send messages between the two frames or proxy the iframe.
DeleteAlready fixed :)
DeleteHow did you resolved this error ? 'DOMException: Permission denied to access property "href" on cross-origin object'
DeleteThis comment has been removed by the author.
ReplyDeleteimport { DomSanitizer, SafeUrl } from '@angular/platform-browser';
ReplyDeletecurrURL: SafeUrl;
constructor(private translate: TranslateService, private sanitizer: DomSanitizer) {
}
this.currURL = this.sanitizer.bypassSecurityTrustResourceUrl(video.url);
How did you resolved this error ? 'DOMException: Permission denied to access property "href" on cross-origin object'
ReplyDelete