与 Iframe Angular 交互后的 Chrome 后退按钮问题

Question

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

1. 客户经过流程并进入其中一个部分页面。

2. 从其中一个部分页面，我单击一个按钮以从跨域获取 ID（通过服务调用完成，因此没有 CORS 问题）。

3. 使用此 ID，我在跨域 url 上附加 - 类似于 http://externalpahe.com?responseId=ID

4. 这个 url 在 Iframe 内作为子组件执行。

5. 在这个 iframe 跨域页面中，有两个按钮 - 'Save' 和 'Cancel'

6. 单击这些按钮中的任何一个时，应用程序都会返回。

7. 问题：成功返回导航后，点击Chrome浏览器的返回按钮，应用程序重新加载。

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

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

角度组件：

constructor(private sanitizer: DomSanitizer) { }

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

角度模板：

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

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

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

有没有办法处理这个问题？

或者可以用不同的方式在 iframe 上执行跨域吗？

Answer 1

长话短说，在这种情况下按下后退按钮是网络普遍存在的问题。不过，有几个想法。思路一：在窗口中使用onbeforeunload事件：

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

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

想法二：设置哈希。

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% 完美，但它会使后退按钮回滚哈希并触发可检测事件，而不是破坏整个流程。

干杯！