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，都是新窗口打开链接的

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

赞 (0)

相关推荐

  • vue中的dom节点和window对象

    vue中的dom节点和window对象

    目录 window对象 dom元素 获取dom节点的3种方式 方式一:(事件源) 方式二:(使用ref) 方式三:(自定义全局指令) window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏直接输入this.window.self都可以直接打印window对象.window对象很很多默认的方法和属性. 一切全局变量和方法都是window的属性和方法,也就是只

  • 教你利用Vue3模仿Windows窗口

    教你利用Vue3模仿Windows窗口

    目录 一.前言 二.功能分析 三.指令封装 四.通用组件封装 五.总结及其源代码参考 六.博文参考 一.前言 Vue3终于在2022年2月7日正式发布了,之前用vite+vue3搭了一个小demo,资料太少而我太菜了,所以一直不敢用Vue3搭新项目,现在随着Vue3正式版本的发布,而且相关配合的子项目库也已经完善,大量的翻译资料和文献都已经可以百度到了,再加上领导支持用Vue3新框架,所以我在新项目上着手用vue-cli(@vue/cli 4.5.9)脚手架搭建Vue3项目. 图1 拖拽窗体效果

  • vue中window.addEventListener(‘scroll‘, xx)失效的解决

    目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效

  • vue项目中销毁window.addEventListener事件监听解析

    目录 销毁window.addEventListener事件监听 window.addEventListener监听scroll事件 解决办法 使用throttle出现的新问题 最后代码 销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录 created() {     window

  • Vue中如何给Window对象添加方法

    目录 给Window对象添加方法 为window对象添加事件处理程序 给Window对象添加方法 大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下 首先在 App.vue methods 中定义一个方法 methods:{     share(){         //微信分享

  • vue如何把组件方法暴露到window对象中

    目录 把组件方法暴露到window对象中 方法 1(简单,但不推荐) 方法 2(推荐,解决方法 1 的痛点) 将方法绑定到window对象下,给app端调用 把组件方法暴露到window对象中 方法 1(简单,但不推荐) mounted() {   // 2. 在mounted阶段声明globalFn,来调用组件内的方法   window.globalFn = () => {     this.getDetail()   } }, methods: {   // 1. 组件内有一个getDeta

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

    目录 使用window.open打开页面并拼接参数 使用window.open()参数详解 1.window.open()有三个参数 2.举例说明 3.第二个参数详解 4.第三个参数详解 使用window.open打开页面并拼接参数 window.open常用来在项目中链接外部网站,接收三个参数 1.strUrl,要打开的页面或资源的url地址 2.strWindowName,窗口的名字,用于后续对该窗口的引用,不是窗口的标题.该参数除了支持普通的名字外,还支持和a标签一样的特殊关键字:_sel

  • Vue中在新窗口打开页面及Vue-router的使用

    背景 在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 使用路由对象的resolve方法解析路由,可以得到location.router.href等目标路由的信息.得到href就可以使用window.open开新窗口了. const {href} = this.$router.resolve({ name: "statistics-explain&qu

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • vue跳转方式（打开新页面）及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two'

  • 默认浏览器设置及vue自动打开页面的方法

    以下为windows 系统操作,仅供参考. 一.修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为默认浏览器. 1.首先打开"开始菜单",点击"控制面板": 2.在"控制面板"里面找到"默认程序",进入后点击"设置默认程序": 3.加载好后选择 "谷歌浏览器": 4.选择"将此程序设置为默认值",如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果.

  • vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错:Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’). 百度了很多办法都说是因为在vue3中引入了elementUi,vue3.0之后是不支持elementUi的,要使用element plus,但是因为我想用若依偷懒,所以必须得用elementUi,很多文章说是vue - V命令查看vu

  • 关于vue中对window.openner的使用指南

    目录 前言 背景 以失败告终的尝试——EventBus 救星——Window.opener 补充:vue 页面window.opener用法(在子窗体中获得父窗体的方法) 总结 参考资料 前言 先说结论:window.openner是做什么的?在vue中新窗口可以使用window.openner调用父窗口的方法.下面就来通过笔者的文章进行更详细的学习吧! 背景 最近项目中使用到了Mqtt做即时通讯的功能,需求要求主页面全局要有一个消息提示功能,当收到一条消息则小铃铛右上方显示新消息的数目,点击小

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

  • window.open打开窗口被拦截的快速解决方法

    自己遇到的使用window.open打开新窗口被拦截的几种情况(使用的chrome浏览器,其他浏览器未测): 第一次:window.open(www.jb51.net),打开了新窗口,但是页面并没有加载出来,需要回车才能出来 解决方法:页面地址需要加上协议名称http://或者https:// 第二次:在ajax异步请求成功的回调函数中使用window.open方法,虽然加上了协议名称,但是,却并没有打开新窗口,在地址栏直接显示 被拦截 的字样 解决方法:有两种: 1.将ajax异步请求改为同步

  • 详解Vue路由History mode模式中页面无法渲染的原因及解决

    详解Vue路由History mode模式中页面无法渲染的原因及解决

    Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.如果因为业务

随机推荐