JavaScript如何在新窗口中打開鏈接——完美分享網頁內容

一、為什麼需要在新窗口中打開鏈接？

當我們在瀏覽網頁的時候，可能會遇到需要打開一個新頁面來瀏覽相關內容的情況：

為了防止用戶離開當前頁面，例如在填寫表單時可以在新頁面查看相關資料；
為了讓用戶可以同時瀏覽多個頁面，例如在查看商品列表時可以在新頁面同時查看商品詳情；
為了方便用戶分享內容，例如在社交媒體上分享某個網頁時可以在新窗口中打開。

二、使用HTML屬性實現在新窗口中打開鏈接

在HTML中，我們可以通過在鏈接中添加target="_blank"屬性來實現在新窗口打開鏈接：

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools!</a>

使用這種方式打開的網頁會在新窗口或新標籤頁中打開。

三、使用JS實現在新窗口中打開鏈接

如果我們想要在JS代碼中控制鏈接的打開方式，可以使用window.open()函數來實現。這個函數接受三個參數：

URL：要打開的鏈接地址
窗口名稱：新窗口的名稱或目標（_blank表示在新窗口打開）
特性：新窗口的特性，例如大小、位置、是否可調整大小等

下面是一個簡單的示例：

function openLink() {
  window.open("https://www.w3schools.com", "_blank");
}

當我們調用openLink()函數時，就會在新窗口中打開https://www.w3schools.com鏈接。

四、使用JS和HTML屬性結合實現在新窗口中打開鏈接

有時候我們想要在JS代碼中動態地控制鏈接的打開方式，但是又希望在HTML鏈接中設置默認的打開方式，這時我們可以結合使用target="_blank"屬性和window.open()函數：

<a href="https://www.w3schools.com" target="_blank" onclick="openLink(event)">Visit W3Schools!</a>

function openLink(event) {
  event.preventDefault(); // 阻止默認鏈接跳轉行為
  window.open(event.target.href, "_blank");
}

這樣，當我們點擊鏈接時，onclick事件會調用openLink()函數，在JS中使用window.open()函數打開鏈接。

五、使用JS改變新窗口的大小和位置等特性

window.open()函數的第三個參數可以設置新窗口的特性，例如大小、位置、是否可調整大小等。下面是一些常見的特性值：

height=：窗口高度
width=：窗口寬度
top=：距離屏幕頂部的距離
left=：距離屏幕左側的距離
resizable=：是否可調整大小
scrollbars=：是否顯示滾動條

下面是一個使用JS改變新窗口大小和位置的例子：

function openLink() {
  var features = "height=400,width=600,top=100,left=100,resizable=yes,scrollbars=no";
  window.open("https://www.w3schools.com", "_blank", features);
}

六、完整代碼示例

下面是一個完整的代碼示例，實現了在新窗口中打開鏈接、阻止默認鏈接跳轉、改變新窗口大小和位置等功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Open Link in New Window</title>
</head>
<body>
  <a href="https://www.w3schools.com" target="_blank" onclick="openLink(event)">Visit W3Schools!</a>

  <script>
    function openLink(event) {
      event.preventDefault();
      var features = "height=400,width=600,top=100,left=100,resizable=yes,scrollbars=no";
      window.open(event.target.href, "_blank", features);
    }
  </script>
</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/258362.html