JS新标签页打开的方法大全(让你的网站访问更加便捷)

前言

大家在浏览网页时，常常需要在新的标签页中打开链接，以便在不离开当前页面的情况下查看其他内容。其中，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>

实现效果

打开 blob 链接

window.open(URL, '_blank'))

总结

到此这篇关于JS新标签页打开的方法大全的文章就介绍到这了,更多相关JS新标签页打开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！