vue中使用window.open()参数详解

本文介绍了JavaScript中的window.open()方法如何用于在浏览器中以不同方式打开新窗口,包括在当前页面弹出、新标签页打开或替换当前页面。通过设置参数,可以自定义新窗口的配置,如尺寸、位置以及是否显示各种窗口元素。示例代码展示了如何创建一个无菜单栏、标题栏和工具栏,但带有滚动条、可调整大小并显示状态栏的新窗口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

打开新窗口有多种情况:

①在当前页面弹出新窗口   ②在浏览器新打开一个标签页 ③替换当前页面

下面为大家介绍一下使用window.open()如何实现这两种情况。

1.window.open()有三个参数

windows.open("URL","name","configuration");

URL:为要新打开页面的url
name:为新打开窗口的名字,可以通过此名字获取该窗口对象
configuration:为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息

2.举例说明 

新打开一个没有菜单栏、标题栏、工具栏,但是有滚动条、状态栏、地址栏且可伸缩窗口

window.open
(
    //第一个参数
    "index.html", 
    //第二个参数
    "newWindow",
    //第三个参数 
    "width=1024, height=700, 
    top=0, left=0, 
    titlebar=no, menubar=no, 
    scrollbars=yes, 
    resizable=yes, 
    status=yes, , 
    toolbar=no, 
    location=yes"
);

window.open 弹出新窗口的命令;
‘index.html’ 弹出窗口的文件名;
‘newWindow’ 弹出窗口的名字(不是文件名),非必须,可用空’'代替;
width=1024 窗口宽度;
height=700 窗口高度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
titlebar=no 是否显示标题栏,被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes;
menubar=no 表示菜单栏,默认值是yes;
scrollbars=yes 是否显示滚动条,默认值是yes;
resizable=no 是否允许改变窗口大小,默认值是yes;
status=no 是否要添加一个状态栏,默认值是yes;
toolbar=no 是否显示工具栏,默认值是yes;
location=no 是否显示地址栏,默认值是yes;

3.第二个参数详解 

_blank 表示新开一个窗口 
_parent表示父框架窗口 
_self表示覆盖该窗口

4.第三个参数详解 

①window.open(url)或者window.open(url, name),其中name为_blank

标准浏览器、新标签打开链接url

②window.open(url, name, configration)

只要配置了configration,都是新窗口打开链接的

### Window.open 方法参数详解及其在 Vue3 中的应用 `window.open()` 是 JavaScript 提供的一个内置方法,用于打开新的浏览器窗口或标签页。它接受三个主要参数,具体如下: #### 1. **第一个参数:URL** 这是目标地址字符串,指定新窗口加载的内容位置。它可以是绝对路径(如 `https://example.com`),也可以是相对路径(相对于当前文档的位置)。如果设置为空字符串 (`''`) 或者未提供,则会创建一个空白的新窗口[^1]。 ```javascript const newUrl = 'https://yourdomain.com/target-page'; // 定义目标网址 ``` #### 2. **第二个参数:名称 (strWindowName)** 这个参数指定了新窗口的名字,主要用于以下两种用途之一: - 当作为链接的目标框架名时,类似于 HTML `<a>` 标签中的 `target` 属性值。 - 如果给出特定名字而非保留字 `_self`, `_blank`, `_parent`, `_top` ,那么再次调用具有相同名字的 `window.open()` 将不会创建额外的窗口而是聚焦已存在的那个窗口[^3]。 对于实现限制同一域名下的单个标签功能来说,这一步非常重要——通过赋予唯一的窗口名称给每个由应用程序启动的新浏览上下文,并利用这一特性来跟踪哪些窗口仍然存活以及它们是否属于我们的应用实例。 #### 3. **第三个参数:配置选项 (features)** 这是一个可选的特征列表,用来描述新开窗口的各种属性,例如大小、位置等等。多个特性的声明之间需要用逗号分隔开来,但不加空格。一些常见的 feature 包括但不限于 width 和 height 表示宽度高度;resizable 控制能否调整尺寸等[^1]。 下面是一些常用的 features 配置项的例子: - `width=800`: 新窗口宽为800像素; - `height=600`: 新窗口高为600像素; - `menubar=yes/no`: 显示菜单栏与否; - `toolbar=yes/no`: 是否显示工具条; - `location=yes/no`: 地址栏可见性; - `status=yes/no`: 状态栏存在状态; - `scrollbars=yes/no`: 滑动条可用不可用; - `resizable=yes/no`: 用户能不能改变窗体大小。 实际运用中可以根据需求组合不同的 options 来满足业务场景的要求。 --- ### 在 Vue3 中实现点击按钮打开新网页并限制单一标签的功能 结合前面提到的知识点,在 Vue3 应用里可以通过自定义逻辑完成这项任务。这里展示一种可行的方式: #### 组件代码片段 ```html <template> <button @click="handleClick">Open New Tab</button> </template> <script> export default { data() { return { uniqueTabIdentifier: null, }; }, methods: { handleClick() { const targetUrl = '/new-tab-content'; // 假设这是我们想要导航到的地方 if (!this.uniqueTabIdentifier) { this.uniqueTabIdentifier = Date.now().toString(); // 创建唯一标识符 sessionStorage.setItem(`tab-${this.uniqueTabIdentifier}`, true); window.open(targetUrl, this.uniqueTabIdentifier); // 使用生成的时间戳作为窗口名 } else { try { const existingTab = window.open('', this.uniqueTabIdentifier); if (existingTab && !existingTab.closed) { existingTab.location.href = targetUrl; // 更新已有标签页内容而不是再新建一个 existingTab.focus(); } } catch(e){ console.error("Error handling single instance tab", e.message); } } } }, beforeUnmount(){ sessionStorage.removeItem(`tab-${this.uniqueTabIdentifier}`); // 清理sessionStorage里的记录 } } </script> ``` 在这个例子当中,我们维护了一个叫做 `uniqueTabIdentifier` 的变量,第一次触发按钮事件的时候为其赋初值并通过 `sessionStorage` 记录下来。之后每当用户尝试开启新标签页之前先检查是否有现存的有效标记对应的那个标签页还在运行之中。如果有就直接操作现有的那个标签页而不允许另起炉灶形成多余的副本。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值