1 min read

window.open() 用法筆記

Table of Contents

window.open() 這個 method 經常使用,但是之前並沒有深究,直到最近讀犀牛書,才發現還有些特別的用法。

先來看看 syntax:

Syntax

var w =  window.open(url, windowName, [windowFeatures]);

參數:url

第一個參數就是 url,很直觀,只要瀏覽器支援的字串都可以丟進去。需要注意的有以下幾點:

  • 如果是空字串,會打開一個空白頁面
  • 如果帶有 schema(例如:https://),會當作絕對位址解析
  • 反之,如果不帶有 schema,會當作相對位址解析

參數:windowName

打開的 window 要叫什麼名字。

  • 如果該名字已經被某個 window(iframe, tab) 使用了,打開的 url 就會開在該 window
  • 如果省略此參數,會使用 _blank 打開一個新的頁面

參數:windowFeatures

一些 window 的控制項,控制 window 的尺寸、scrollbar 顯示與否等等,詳細用法可參考 MDN

  • 使用逗號分隔
  • 不可使用空白字元

其他功能

如果用 window.open 打開的話,就可以控制打開的 window 了,提供一些比較有用的用法如下:

var w = window.open('https://example.com', 'examplePage');

// 在同一個 tab 內開啟 example2.com
window.open('https://example2.com', 'examplePage');

// 子頁面回到上一頁
w.history.back();

// 關掉子頁面
w.close();

參考資料