javascript - 与 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 出现奇怪的问题。对于其他浏览器，它工作正常。

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 会导致所有浏览器在实际强制重新加载所有内容之前提示用户，这总比没有好。不幸的是，它也会在关闭/刷新窗口时执行此操作，但您可以在完成后删除监听器。

思路二:设置哈希。

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

干杯!