前言

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

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

window.location.assign(URL)

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

代碼實(shí)例

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

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

實(shí)現(xiàn)效果

window.location.href = “URL”

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

代碼實(shí)例

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

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

實(shí)現(xiàn)效果

location.assign(“URL”)

代碼實(shí)例

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

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

實(shí)現(xiàn)效果

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

location.replace(URL)

replace() 方法可用一個(gè)新文檔取代當(dāng)前文檔。replace() 方法跳轉(zhuǎn)后，瀏覽器的返回鍵是無(wú)法點(diǎn)擊的，因?yàn)?replace 其實(shí)是將當(dāng)前的 url 替換了，而非跳轉(zhuǎn)，并不會(huì)保存記錄。

代碼實(shí)例

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

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

實(shí)現(xiàn)效果

三. 新建標(biāo)簽頁(yè)打開網(wǎng)址

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

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

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

URL：

可選。打開指定的頁(yè)面的 URL。如果沒(méi)有指定 URL，打開一個(gè)新的空白窗口。

name：

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

• _blank - URL 加載到一個(gè)新的窗口。這是默認(rèn)
• _parent - URL 加載到父框架
• _self - URL 替換當(dāng)前頁(yè)面
• _top - URL 替換任何可加載的框架集
• name - 窗口名稱

specs：

可選。一個(gè)逗號(hào)分隔的項(xiàng)目列表。支持以下值：

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

replace：

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

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

代碼實(shí)例

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

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

實(shí)現(xiàn)效果

打開 blob 鏈接

window.open(URL, '_blank'))

總結(jié)

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

最新評(píng)論