vue中使用window.open()參數(shù)示例詳解
vue中使用window.open()參數(shù)詳解
打開(kāi)新窗口有多種情況:
①在當(dāng)前頁(yè)面彈出新窗口 ②在瀏覽器新打開(kāi)一個(gè)標(biāo)簽頁(yè) ③替換當(dāng)前頁(yè)面
下面為大家介紹一下使用window.open()如何實(shí)現(xiàn)這兩種情況。
1.window.open()有三個(gè)參數(shù)
windows.open("URL","name","configuration");
URL:為要新打開(kāi)頁(yè)面的url
name:為新打開(kāi)窗口的名字,可以通過(guò)此名字獲取該窗口對(duì)象
configuration:為新打開(kāi)窗口的一些配置項(xiàng),比如是否有菜單欄、滾動(dòng)條、長(zhǎng)高等等信息
2.舉例說(shuō)明
新打開(kāi)一個(gè)沒(méi)有菜單欄、標(biāo)題欄、工具欄,但是有滾動(dòng)條、狀態(tài)欄、地址欄且可伸縮窗口
window.open ( //第一個(gè)參數(shù) "index.html", //第二個(gè)參數(shù) "newWindow", //第三個(gè)參數(shù) "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 窗口距離屏幕左側(cè)的象素值;
titlebar=no 是否顯示標(biāo)題欄,被忽略,除非調(diào)用HTML應(yīng)用程序或一個(gè)值得信賴的對(duì)話框.默認(rèn)值是yes;
menubar=no 表示菜單欄,默認(rèn)值是yes;
scrollbars=yes 是否顯示滾動(dòng)條,默認(rèn)值是yes;
resizable=no 是否允許改變窗口大小,默認(rèn)值是yes;
status=no 是否要添加一個(gè)狀態(tài)欄,默認(rèn)值是yes;
toolbar=no 是否顯示工具欄,默認(rèn)值是yes;
location=no 是否顯示地址欄,默認(rèn)值是yes;
3.第二個(gè)參數(shù)詳解
_blank 表示新開(kāi)一個(gè)窗口
_parent表示父框架窗口
_self表示覆蓋該窗口
4.第三個(gè)參數(shù)詳解
①window.open(url)或者window.open(url, name),其中name為_(kāi)blank
標(biāo)準(zhǔn)瀏覽器、新標(biāo)簽打開(kāi)鏈接url
②window.open(url, name, configration)
只要配置了configration,都是新窗口打開(kāi)鏈接的
補(bǔ)充:在vue中使用windom.open()跳轉(zhuǎn)html文件傳遞和獲取參數(shù)
前言
有些項(xiàng)目可能你使用的是 vue,但是卻要打開(kāi) html 文件去完成業(yè)務(wù)功能,比如打開(kāi) word 編輯文檔之類的,這時(shí)候可以用 windom.open()這個(gè)方法去實(shí)現(xiàn)
windom.open()的使用
- 首先你的 html 文件要放在 pubilc 文件下面,這樣他打開(kāi)的目錄就是根目錄
- vue 文件里使用可以傳遞你所需要的參數(shù)
window.open(`/word/index.html?name=${參數(shù)}`);
html 文件接收參數(shù)
window.location.search;
到此這篇關(guān)于vue中使用window.open()參數(shù)詳解的文章就介紹到這了,更多相關(guān)vue window.open()參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目是如何運(yùn)行起來(lái)的
這篇文章主要介紹了vue項(xiàng)目是如何運(yùn)行起來(lái)的,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue 頁(yè)面狀態(tài)保持頁(yè)面間數(shù)據(jù)傳輸?shù)囊环N方法(推薦)
vue router給我們提供了兩種頁(yè)面間傳遞參數(shù)的方式,一種是動(dòng)態(tài)路由匹配,一種是編程式導(dǎo)航,接下來(lái)通過(guò)本文給大家介紹Vue 頁(yè)面狀態(tài)保持頁(yè)面間數(shù)據(jù)傳輸?shù)囊环N方法,需要的朋友可以參考下2018-11-11VUE el-tree組件左邊勾選,右邊清除交互問(wèn)題
這篇文章主要介紹了VUE el-tree組件左邊勾選,右邊清除交互問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2023-04-04詳解Vue組件實(shí)現(xiàn)tips的總結(jié)
這篇文章主要介紹了詳解Vue組件實(shí)現(xiàn)tips的總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11基于vue2.0動(dòng)態(tài)組件及render詳解
下面小編就為大家分享一篇基于vue2.0動(dòng)態(tài)組件及render詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問(wèn)題的解決方法,需要的朋友可以參考下2018-02-02詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11