嵌入在iframe中的Angular站点,如何打开一个新的tab页面

1. 需求

一个angular web站点,通过一个iframe嵌套在另一个web站点中。点击一个按钮,希望能够在一个新的页面(Tab)中打开另外一个页面。

2. 方案

主要困难在于处理2个站点的地址不同的问题。既可以通过 html 设置href实现,又可以直接使用js代码实现。

Code:

  
  <a [href]="url" target="_blank">1. open New Tab - based on a.href </a>

  <button (click)="openNewTab()" >2. open New Tab -  by pure js/ts</button>
// 1. open New Tab - based on a.href
url = "";
ngOnInit() {
this.url = window.location.origin + "/help.html";
}

// 2. open New Tab -  by pure js/ts
openNewTab() {
window.open(window.location.origin + "/help.html", "_blank");
}

3. 总结

主要困难在于处理2个站点的地址不同的问题(window.location.origin),和是否嵌套在其他站点(iframe)没有关系。

posted on 2021-01-07 21:38  Jack Niu  阅读(329)  评论(0编辑  收藏  举报

Affiliate Marketing and Web Technology