Chrome 与 Iframe 交互后返回按钮问题 Angular

Question

我有一个 Angular 应用程序。以下是要遵循的步骤：

一位客户通过流程并进入其中一个部分页面。
从其中一个部分页面，我单击一个按钮以从跨域获取 ID（通过服务调用完成，因此没有 CORS 问题）。
使用这个 ID，我在跨域上追加 url——类似于 http://externalpahe.com?responseId=ID
此 url 在 Iframe 内执行子组件。
在这个 Iframe 跨域的页面中，有两个按钮 - 'Save' 和 'Cancel'
单击这些按钮中的任何一个，应用程序将返回。
问题： 成功后退导航后，点击 Chrome 浏览器的后退按钮 ，应用程序重新加载。

因此，应用程序 的流程再次重新启动 并且客户需要通过 再次流动。虽然数据得到更新，但在返回到之前已执行操作的部分页面时，这不是一个易于使用的场景。

我正在使用下面的代码在 iframe 中执行跨域的 url。我怀疑 DomSanitizer 是否导致了 Chrome 的奇怪问题。对于其他浏览器，它工作正常。

Angular分量：

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {
    this.targetUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.sourceUrl);
}

Angular 模板：

<iframe #crossDomainIframe [src]="targetUrl" (load)="onPageLoad()">
</iframe>

在 onPageLoad() 中，我正在执行将响应发送回父组件的简单业务逻辑。

onPageLoad () {
    this.callbackResponse.emit(returnUrl);
}

有办法解决这个问题吗？

或者跨域可以在iframe上换个方式执行吗？

Answer 1

长话短说，在这种情况下按下后退按钮是网络普遍存在的问题。尽管如此，还是有一些想法。思路一：在window:

中使用onbeforeunload事件

window.addEventListener('beforeunload', function(e){
    e.preventDefault();
    e.returnValue = 'Hitting the back button will make you start over!';
    return e.returnValue;
});

并非所有浏览器都会显示正确的对话框文本，但设置 returnValue 会导致所有浏览器在实际强制重新加载所有内容之前提示用户，这总比没有好。不幸的是，它也会在 close/refresh window 上执行此操作，但您可以在完成后删除侦听器。

思路二：设置哈希。

var ignoreNextHashChange;
window.onhashchange = function(){
  if (ignoreNextHashChange)
    ignoreNextHashChange = false;
  else
    alert('Whoa there--using the back button will break the process!');
}

然后在你编写代码的每个阶段都执行如下操作：

ignoreNextHashChange = true;
window.location.hash = '#hashForThisStage';

同样，不是 100% 完美，但它会让后退按钮回滚哈希值并触发可检测的事件，而不是破坏您的整个流程。

干杯！

Chrome 与 Iframe 交互后返回按钮问题 Angular

Chrome Back button issue after interaction with Iframe Angular

javascript

iframe

sanitization

typescript

angular