vue3结合后端传递过来的文件进行预览功能-实现方式二：使用原生的window.open方法

时间：2025-02-20 18:40:12

描述：

window.open() 是 JavaScript 中用来打开新浏览器窗口或标签页的方法。它的基本语法如下

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

参数：
URL (可选)：要打开的页面的 URL。如果为空，打开一个空白页面。
name (可选)：指定新窗口或标签页的名称。如果该名称已经存在，会在相同窗口中加载 URL。如果没有指定或为空，则会使用默认值 _blank 打开新窗口。
specs (可选)：指定新窗口的特性，如宽度、高度、是否显示工具栏、滚动条等。多个特性用逗号分隔。
replace (可选)：布尔值，表示是否替换当前历史记录。默认为 false。

实例代码：

// 打开一个新窗口，显示指定的URL
window.open("https://www.example.com");
// 打开一个新窗口，指定名称、特性
window.open("https://www.example.com", "_blank", "width=800,height=600,scrollbars=yes");
// 打开一个新窗口，使用已知的窗口名称
window.open("https://www.example.com", "myWindow", "width=800,height=600");
// 打开一个空白窗口并不替换历史记录
window.open("", "_blank", "width=400,height=300", false);

参数说明：

URL：要打开的页面的地址。如果省略或传递空字符串，浏览器会打开一个空白页面。
name：
    _blank：打开新标签页或新窗口（最常用）。
    _self：在相同的窗口中加载页面（默认）。
    _parent：在父框架中加载页面。
    _top：在整个窗口（最上层）中加载页面。
    windowName：可以指定任何自定义名称的窗口，如果有相同名称的窗口，则会在该窗口中加载内容。
specs：这是一个逗号分隔的字符串，用于定义新窗口的特性，比如：
    width：窗口的宽度。
    height：窗口的高度。
    resizable：是否允许调整窗口大小（yes 或 no）。
    scrollbars：是否显示滚动条（yes 或 no）。
    toolbar：是否显示工具栏（yes 或 no）。
    menubar：是否显示菜单栏（yes 或 no）。
    location：是否显示地址栏（yes 或 no）。
    status：是否显示状态栏（yes 或 no）。
    示例："width=600,height=400,scrollbars=yes,resizable=yes"。

例子：

	// 打开一个宽度为 600px、高度为 400px 的新窗口，带有滚动条和可调整大小的功能
window.open("https://www.example.com", "_blank", "width=600,height=400,scrollbars=yes,resizable=yes");

// 打开一个空白窗口
window.open("", "_blank", "width=400,height=300");

注意：
由于浏览器的弹窗拦截器，window.open() 的调用可能会被阻止，尤其是在没有用户交互（如点击事件）的情况下。因此，通常需要通过用户操作（如点击按钮）触发 window.open()。
在现代浏览器中，过多的弹窗可能会被浏览器自动屏蔽。

相关文章