前言

大家在瀏覽網(wǎng)頁時，常常需要在新的標簽頁中打開鏈接，以便在不離開當前頁面的情況下查看其他內容。其中，JS 打開新標簽頁作為一種常用的功能之一，既可以方便用戶快速訪問相關鏈接，又能有效提升網(wǎng)站的用戶體驗。在本文中，我將為大家介紹如何使用 JS 打開新標簽頁，并探討一些相關的技術和注意事項。

一. 替換新的網(wǎng)址，有歷史記錄，可以回退

window.location.assign(URL)

assign() 方法用于加載一個新的文檔。

代碼實例

<template>
  <div>
    <button @click="loadOn">載入新文檔</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadOn() {
      window.location.assign("https://www.csdn.net/");
    },
  },
};
</script>

實現(xiàn)效果

window.location.href = “URL”

location.href 是一個屬性，用于改變 url 地址。

代碼實例

<template>
  <div>
    <button @click="loadOn">載入新文檔</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadOn() {
      window.location.;
    },
  },
};
</script>

實現(xiàn)效果

location.assign(“URL”)

代碼實例

<template>
  <div>
    <button @click="loadOn">載入新文檔</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadOn() {
      location.assign("https://www.csdn.net/");
    },
  },
};
</script>

實現(xiàn)效果

二. 替換新的網(wǎng)址，沒有歷史記錄，不可以回退

location.replace(URL)

replace() 方法可用一個新文檔取代當前文檔。replace() 方法跳轉后，瀏覽器的返回鍵是無法點擊的，因為 replace 其實是將當前的 url 替換了，而非跳轉，并不會保存記錄。

代碼實例

<template>
  <div>
    <button @click="loadOn">載入新文檔</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadOn() {
      location.replace("https://www.csdn.net/");
    },
  },
};
</script>

實現(xiàn)效果

三. 新建標簽頁打開網(wǎng)址

window.open(URL,name,specs,replace)

open() 方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口。

window.open() 方法的參數(shù)

URL：

可選。打開指定的頁面的 URL。如果沒有指定 URL，打開一個新的空白窗口。

name：

可選。指定 target 屬性或窗口的名稱。支持以下值：

• _blank - URL 加載到一個新的窗口。這是默認
• _parent - URL 加載到父框架
• _self - URL 替換當前頁面
• _top - URL 替換任何可加載的框架集
• name - 窗口名稱

specs：

可選。一個逗號分隔的項目列表。支持以下值：

• channelmode=yes|no|1|0 是否要在影院模式顯示 window。默認是沒有的。僅限IE瀏覽器
• directories=yes|no|1|0 是否添加目錄按鈕。默認是肯定的。僅限 IE 瀏覽器
• fullscreen=yes|no|1|0 瀏覽器是否顯示全屏模式。默認是沒有的。在全屏模式下的 window，還必須在影院模式。僅限 IE 瀏覽器
• height=pixels 窗口的高度。最小值為 100
• left=pixels 該窗口的左側位置
• location=yes|no|1|0 是否顯示地址字段，默認值是 yes
• menubar=yes|no|1|0 是否顯示菜單欄，默認值是 yes
• resizable=yes|no|1|0 是否可調整窗口大小，默認值是 yes
• scrollbars=yes|no|1|0 是否顯示滾動條，默認值是 yes
• status=yes|no|1|0 是否要添加一個狀態(tài)欄，默認值是 yes
• titlebar=yes|no|1|0 是否顯示標題欄，被忽略，除非調用 HTML 應用程序或一個值得信賴的對話框，默認值是 yes
• toolbar=yes|no|1|0 是否顯示瀏覽器工具欄.默認值是 yes
• top=pixels 窗口頂部的位置，僅限 IE 瀏覽器
• width=pixels 窗口的寬度，最小值為 100

replace：

Optional.Specifies 規(guī)定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創(chuàng)建一個新條目，還是替換瀏覽歷史中的當前條目。支持下面的值：

• true - URL 替換瀏覽歷史中的當前條目
• false - URL 在瀏覽歷史中創(chuàng)建新的條目

代碼實例

<template>
  <div>
    <button @click="loadOn">載入新文檔</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadOn() {
      window.open("https://www.csdn.net/");
    },
  },
};
</script>

實現(xiàn)效果

打開 blob 鏈接

window.open(URL, '_blank'))

總結

到此這篇關于JS新標簽頁打開的方法大全的文章就介紹到這了,更多相關JS新標簽頁打開內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論