文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-05-17 09:06

关注

vue中使用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中使用windom.open()跳转html文件传递和获取参数

前言

有些项目可能你使用的是 vue,但是却要打开 html 文件去完成业务功能,比如打开 word 编辑文档之类的,这时候可以用 windom.open()这个方法去实现

windom.open()的使用

window.open(`/word/index.html?name=${参数}`);

html 文件接收参数

window.location.search;

到此这篇关于vue中使用window.open()参数详解的文章就介绍到这了,更多相关vue window.open()参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯