window.open使用方法以及参数说明

 
一、window.open()支持环境:
  
  JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
  
   二、基本语法:
  
  window.open(pageURL,name,parameters)
  
  其中:
  pageURL 为子窗口路径
  name 为子窗口句柄
  parameters 为窗口参数(各参数用逗号分隔)
  
   三、各项参数
  
  其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。
  
  参数 | 取值范围 | 说明
  | |
  alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
  alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
  depended | yes/no | 是否和父窗口同时关闭
  directories | yes/no | Nav2和3的目录栏是否可见
  height | pixel value | 窗口高度
  hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
  innerHeight | pixel value | 窗口中文档的像素高度
  innerWidth | pixel value | 窗口中文档的像素宽度
  location | yes/no | 位置栏是否可见
  menubar | yes/no | 菜单栏是否可见
  outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
  outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
  resizable | yes/no | 窗口大小是否可调整
  screenX | pixel value | 窗口距屏幕左边界的像素长度
  screenY | pixel value | 窗口距屏幕上边界的像素长度
  scrollbars | yes/no | 窗口是否可有滚动栏
  titlebar | yes/no | 窗口题目栏是否可见
  toolbar | yes/no | 窗口工具栏是否可见
  Width | pixel value | 窗口的像素宽度
  z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
### 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` 记录下来。之后每当用户尝试开启新标签页之前先检查是否有现存的有效标记对应的那个标签页还在运行之中。如果有就直接操作现有的那个标签页而不允许另起炉灶形成多余的副本。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值