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