How can I track the current URL inside a cross-origin iframe to restore it after page reload?

I'm embedding an external documentation site (scrollhelp.site) inside an Angular app using an iframe like this:

<iframe [src]="iframeSrc" id="frame"></iframe>


This is how the iframe URL is generated:

iframeSrc = computed(() => {
const selectedLanguage = this.languageStore.selectedLanguage();
if (selectedLanguage) {
const url = `https://weblager-user-guide.scrollhelp.site/${selectedLanguage.iso639_1}/user-guides/v2/${this.guidePage}`;
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}


I want to detect when the user navigates to a different page inside the iframe, and store that new internal URL so I can restore it after a full page refresh. Right now, if the user refreshes the main application, the iframe gets reconstructed and the user is routed to the landing page of the iframe.

I have no access to the .document because I do not have access to the site in the iframe.

Continue reading...