JS打開新窗口（window.open）詳解

一、window.open的基本用法

在JS中，我們可以使用window.open()方法來打開新窗口。它有三個參數，第一個參數是要打開的URL，第二個參數是窗口名稱（可以為空），第三個參數是窗口的屬性。例如：

window.open("https://www.example.com", "_blank", "width=500,height=500");

這個代碼會在一個新窗口中打開https://www.example.com這個網站，窗口的寬高為500像素。

如果第二個參數為空，則會在當前窗口中打開URL。例如：

window.open("https://www.example.com", "", "width=500,height=500");

這個代碼會在當前窗口中打開https://www.example.com這個網站，窗口的寬高為500像素。

二、窗口的屬性

窗口的屬性可以控制它的大小、位置、是否有工具欄等等。下面是一些常用的屬性：

1、width和height

控制窗口的寬高，單位是像素。

window.open("https://www.example.com", "", "width=500,height=500");

2、top和left

控制窗口的位置，單位是像素。top表示距離屏幕頂部的距離，left表示距離屏幕左側的距離。

window.open("https://www.example.com", "", "top=100,left=100,width=500,height=500");

3、menubar、toolbar和location

控制窗口是否顯示菜單欄、工具欄和地址欄。

window.open("https://www.example.com", "", "menubar=no,toolbar=no,location=no,width=500,height=500");

4、resizable

控制窗口是否可以改變大小。

window.open("https://www.example.com", "", "resizable=no,width=500,height=500");

三、打開新窗口的限制

瀏覽器通常會阻止自動打開新窗口，除非用戶進行了某些交互操作。例如，點擊一個按鈕或鏈接時可以打開新窗口。

此外，瀏覽器也會對打開的窗口進行限制，例如防止彈出式窗口的濫用。如果窗口是在一個沒有經過用戶交互的情況下打開的，它可能會被瀏覽器攔截。

四、跨域打開新窗口

如果要在一個域名下打開另一個域名的網頁，由於同源策略的限制，我們通常無法直接使用window.open()方法打開新窗口。但是我們可以通過在當前窗口中先打開一個HTML文件，然後在HTML文件中再使用window.open()方法打開目標網頁的方式來實現跨域打開新窗口。

例如，在當前窗口中打開一個名為new-window.html的文件，然後在new-window.html文件中打開目標網頁：

window.open("new-window.html", "", "width=500,height=500");

在new-window.html中打開目標網頁：

window.open("https://www.example.com", "_blank", "width=500,height=500");

五、結語

JS打開新窗口是一個非常常見的需求，我們可以根據自己的需求來靈活使用窗口的屬性來控制新窗口的大小、位置和功能。同時需要注意同源策略的限制，根據實際情況來選擇合適的解決方案。