Jack N @ GitHub

Full stack engineer, focus on: Angular/React, node.js/.Net

0%

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

  • 1. 需求
  • 2. 方案
  • 3. 总结

    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)没有关系。