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

Question

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

1. 客户通过流程并登陆其中一个部分页面.

2. 从部分页面之一,我单击一个按钮从跨域获取ID(通过服务调用完成,因此没有CORS问题).

3. 使用此ID,我追加跨域url - 类似于http://externalpahe.com?responseId=ID

4. 此URL在Iframe内执行子组件.

5. 在这个Iframe跨域的页面中,有两个按钮 - " 保存 "和" 取消 "

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%完美,但它会使后退按钮回滚哈希并发射一个可检测的事件,而不是打破你的整个流程.

干杯!