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

Posted on

1. 需求

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

2. 方案

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

Code:

1
2
3
4

<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
2
3
4
5
6
7
8
9
10
// 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）没有关系。