前言

大家在浏览网页时，常常需要在新的标签页中打开链接，以便在不离开当前页面的情况下查看其他内容。其中，JS 打开新标签页作为一种常用的功能之一，既可以方便用户快速访问相关链接，又能有效提升网站的用户体验。在本文中，我将为大家介绍如何使用 JS 打开新标签页，并探讨一些相关的技术和注意事项。

一. 替换新的网址，有历史记录，可以回退

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>

实现效果

在这里插入图片描述

window.location.href = “URL”

location.href 是一个属性，用于改变 url 地址。

代码实例

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

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

实现效果

在这里插入图片描述

location.assign(“URL”)

代码实例

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

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

实现效果

在这里插入图片描述

二. 替换新的网址，没有历史记录，不可以回退

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>

实现效果

在这里插入图片描述

三. 新建标签页打开网址

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

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open() 方法的参数

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 是否要添加一个状态栏，默认值是 yes
titlebar=yes|no|1|0 是否显示标题栏，被忽略，除非调用 HTML 应用程序或一个值得信赖的对话框，默认值是 yes
toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是 yes
top=pixels 窗口顶部的位置，仅限 IE 浏览器
width=pixels 窗口的宽度，最小值为 100

replace：

Optional.Specifies 规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目
false - URL 在浏览历史中创建新的条目

代码实例

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

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