页面嵌入iframe 点击浏览器后退问题

页面嵌入iframe 点击浏览器后退问题

• 在iframe绑定load事件，这样子就可以监听到打开 iframe 点击浏览器后退 按钮事件；

<div [hidden]="!iframePageDisplay" class="iframeStyle">
		<iframe [src]="iframeUrl" width="100%" height="100%" frameborder="0" id="message" name="nameOfThematicProgrammes" (load)='iframeOnload()'></iframe>
</div>

• load事件中，打开iframe，push进去一个history；

iframeOnload(){
   if(this.iframePageDisplay){
      let state = {
          title: "title",
          url: window.location.href,
       };
       window.history.pushState(state, "title", state.url);
    }
}

• 增加浏览器监听事件

popstateHandler: any;

this.popstateHandler = this.backPopstate.bind(_this);
window.addEventListener('popstate', this.popstateHandler,true)

// 浏览器返回执行方法
backPopstate(){
   if(this.iframePageDisplay){
      this.iframePageDisplay = false;
      history.back();
      window.removeEventListener('popstate', this.popstateHandler, true);
   }
}

• 对增加的浏览器事件进行移出；

ngOnDestroy(){
	 window.removeEventListener('popstate', this.popstateHandler, true);
}