vue如何使用window.open打开页面并拼接参数

目录 使用window.open打开页面并拼接参数 使用window.open()参数详解 1.window.open()有三个参数 2.举例说明  3.第二个参数详解  4.第三个参数详解 

使用window.open打开页面并拼接参数

window.open常用来在项目中链接外部网站，接收三个参数

1.strUrl，要打开的页面或资源的url地址

2.strWindowName，窗口的名字，用于后续对该窗口的引用，不是窗口的标题。该参数除了支持普通的名字外，还支持和a标签一样的特殊关键字：_self（当前窗口）、_blank（空白窗口）、_parent（父窗口）、_top（顶级窗口）

3.strWindowFeatures，窗口的描述参数，如尺寸、位置、是否启用工具栏等。各个参数由逗号隔开，参数之间以等号连接。可以指定窗口的大小和位置。

如果需要在地址后拼接参数，可以对地址使用转义字符，使用${}拼接参数。

window.open(`http://cams.mof.gov.cn/am-server/#/MigrtDetailInfo?d=${this.currentId}`, '_blank','top=10,left=10,width=400,height=200')

使用window.open()参数详解

打开新窗口有多种情况：

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

下面为大家介绍一下使用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，都是新窗口打开链接的 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue如何使用window.open打开页面并拼接参数的详细内容...