vue如何使用window.open打開頁面并拼接參數(shù)
使用window.open打開頁面并拼接參數(shù)
window.open常用來在項(xiàng)目中鏈接外部網(wǎng)站,接收三個(gè)參數(shù)
1.strUrl,要打開的頁面或資源的url地址
2.strWindowName,窗口的名字,用于后續(xù)對(duì)該窗口的引用,不是窗口的標(biāo)題。該參數(shù)除了支持普通的名字外,還支持和a標(biāo)簽一樣的特殊關(guān)鍵字:_self(當(dāng)前窗口)、_blank(空白窗口)、_parent(父窗口)、_top(頂級(jí)窗口)
3.strWindowFeatures,窗口的描述參數(shù),如尺寸、位置、是否啟用工具欄等。各個(gè)參數(shù)由逗號(hào)隔開,參數(shù)之間以等號(hào)連接??梢灾付ù翱诘拇笮『臀恢谩?/p>
如果需要在地址后拼接參數(shù),可以對(duì)地址使用轉(zhuǎn)義字符,使用${}拼接參數(shù)。
window.open(`http://cams.mof.gov.cn/am-server/#/MigrtDetailInfo?d=${this.currentId}`, '_blank','top=10,left=10,width=400,height=200')
使用window.open()參數(shù)詳解
打開新窗口有多種情況:
- ①在當(dāng)前頁面彈出新窗口
- ②在瀏覽器新打開一個(gè)標(biāo)簽頁
- ③替換當(dāng)前頁面
下面為大家介紹一下使用window.open()如何實(shí)現(xiàn)這兩種情況。
1.window.open()有三個(gè)參數(shù)
windows.open("URL","name","configuration");
URL
:為要新打開頁面的urlname
:為新打開窗口的名字,可以通過此名字獲取該窗口對(duì)象configuration
:為新打開窗口的一些配置項(xiàng),比如是否有菜單欄、滾動(dòng)條、長高等等信息
2.舉例說明
新打開一個(gè)沒有菜單欄、標(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
表示新開一個(gè)窗口_parent
表示父框架窗口_self
表示覆蓋該窗口
4.第三個(gè)參數(shù)詳解
①window.open(url)或者window.open(url, name),其中name為_blank
標(biāo)準(zhǔn)瀏覽器、新標(biāo)簽打開鏈接url
②window.open(url, name, configration)
只要配置了configration,都是新窗口打開鏈接的
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法,小編一一給大家列出來了,大家根據(jù)自身需要選擇,需要的朋友可以參考下2018-09-09vue項(xiàng)目依賴升級(jí)報(bào)錯(cuò)處理方式
這篇文章主要介紹了vue項(xiàng)目依賴升級(jí)報(bào)錯(cuò)處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08