JavaScript Window 打開(kāi)新窗口(window.location.href、window.open、window.showModalDialog)
1、方式1: window.location.href
window.location.href="http://m.fzitv.net"; //在當(dāng)前窗口中打開(kāi)窗口
類似于HTML:
<a href="http://m.fzitv.net" title="測(cè)試1">Welcome Test1</a>
2、方式2: window.open
window.open("http://m.fzitv.net"); //在另外新建窗口中打開(kāi)窗口類似于HTEL:
<a href="http://m.fzitv.net" title="測(cè)試2" target="_blank">Welcome Test2</a>
指定參數(shù):
<script > var NewUrl = 'www.baidu.com' ; window.open(NewUrl,'newindow','height=600,width=900,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'); </script >
參數(shù)說(shuō)明:
- NewUrl //' 彈出窗口的地址;
- 'newwindow' //彈出窗口的名字,非必須,可用空''代替;
- height=600 //窗口高度;
- width=900 //窗口寬度;
- top=0 //窗口距離屏幕上方的象素值;
- left=0 //窗口距離屏幕左側(cè)的象素值;
- toolbar=no //是否顯示工具欄,yes為顯示;
- menubar,scrollbars //表示菜單欄和滾動(dòng)欄。
- resizable=no //是否允許改變窗口大小,yes為允許;
- location=no //是否顯示地址欄,yes為允許;
- status=no //是否顯示狀態(tài)欄內(nèi)的信息,yes為允許;
3、方式3 window.showModalDialog (部分瀏覽器不支持)
var URL='http://m.fzitv.net' window.showModalDialog(URL,'','DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no');
原型:
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
參數(shù)說(shuō)明:
- sURL //必選參數(shù),類型:字符串。用來(lái)指定對(duì)話框要顯示的文檔的URL。
- vArguments //可選參數(shù),類型:變體。用來(lái)向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限,包括數(shù)組等。對(duì)話框通過(guò)window.dialogArguments來(lái)取得傳遞進(jìn)來(lái)的參數(shù)。
- sFeatures //可選參數(shù),類型:字符串。用來(lái)描述對(duì)話框的外觀等信息,可以使用以下的一個(gè)或幾個(gè),用分號(hào)“;”隔開(kāi)。
- dialogHeight// 對(duì)話框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默認(rèn)的單位是em,而IE5中是px,為方便其見(jiàn),在定義modal方式的對(duì)話框時(shí),用px做單位。
- dialogWidth: //對(duì)話框?qū)挾取?/li>
- dialogLeft: //距離桌面左的距離。
- dialogTop: //離桌面上的距離。
- center: {yes | no | 1 | 0 }://窗口是否居中,默認(rèn)yes,但仍可以指定高度和寬度。
- help: {yes | no | 1 | 0 }://是否顯示幫助按鈕,默認(rèn)yes。
- resizable: {yes | no | 1 | 0 } [IE5+]://是否可被改變大小。默認(rèn)no。
- status: {yes | no | 1 | 0 } [IE5+]://是否顯示狀態(tài)欄。默認(rèn)為yes[ Modeless]或no[Modal]。
- scroll:{ yes | no | 1 | 0 | on | off }://指明對(duì)話框是否顯示滾動(dòng)條。默認(rèn)為yes。
另外幾個(gè)屬性用在HTA中的,在一般的網(wǎng)頁(yè)中一般不使用。
- dialogHide:{ yes | no | 1 | 0 | on | off }://在打印或者打印預(yù)覽時(shí)對(duì)話框是否隱藏。默認(rèn)為no。
- edge:{ sunken | raised }://指明對(duì)話框的邊框樣式。默認(rèn)為raised。
- unadorned:{ yes | no | 1 | 0 | on | off }://默認(rèn)為no。
傳入?yún)?shù):
要想對(duì)話框傳遞參數(shù),是通過(guò)vArguments來(lái)進(jìn)行傳遞的。類型不限制,對(duì)于字符串類型,最大為4096個(gè)字符。也可以傳遞對(duì)象,例如:
//test1.htm
<script>
var mxh1 = new Array("mxh","net_lover","孟子E章")
var mxh2 = window.open("about:blank","window_mxh")
// 向?qū)υ捒騻鬟f數(shù)組
window.showModalDialog("test2.htm",mxh1)
// 向?qū)υ捒騻鬟fwindow對(duì)象
window.showModalDialog("test3.htm",mxh2)
</script>
//test2.htm
<script>
var a = window.dialogArguments
alert("您傳遞的參數(shù)為:" + a)
</script>
//test3.htm
<script>
var a = window.dialogArguments
alert("您傳遞的參數(shù)為window對(duì)象,名稱:" + a.name)
</script>可以通過(guò)window.returnValue向打開(kāi)對(duì)話框的窗口返回信息,當(dāng)然也可以是對(duì)象。例如:
//test4.htm
<script>
var a = window.showModalDialog("test5.htm")
for(i=0;i<a.length;i++) alert(a[i])
</script>
//test5.htm
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<form>
<input value="返回" type=button onclick="sendTo()">
</form>4、Window 其他參考
- window.open() - 打開(kāi)新窗口
- window.close() - 關(guān)閉當(dāng)前窗口
- window.moveTo() -移動(dòng)當(dāng)前窗口
- window.resizeTo() -重新調(diào)整當(dāng)前窗口
到此這篇關(guān)于JavaScript Window 打開(kāi)新窗口的三種方式的文章就介紹到這了,更多相關(guān)JavaScript Window 打開(kāi)新窗口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- javascript 中設(shè)置window.location.href跳轉(zhuǎn)無(wú)效問(wèn)題解決辦法
- js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法
- 關(guān)于js中window.location.href,location.href,parent.location.href,top.location.href的用法與區(qū)別
- 快速解決js中window.location.href不工作的問(wèn)題
- js中window.location.href的用法大全
- javascript中window.location.href的用法
- JS操作BOM時(shí)window.location.href跳轉(zhuǎn)后頁(yè)面不刷新問(wèn)題解決辦法
相關(guān)文章
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
js window.addEventListener實(shí)際案例
window.addEventListener 是 JavaScript 中的一個(gè)方法,用于向指定對(duì)象添加事件監(jiān)聽(tīng)器,下面通過(guò)本文給大家介紹js window.addEventListener的實(shí)際案例,感興趣的朋友跟隨小編一起看看吧2024-12-12
javascript實(shí)現(xiàn)簡(jiǎn)單的省市區(qū)三級(jí)聯(lián)動(dòng)
本文給大家反映的是javascript實(shí)現(xiàn)的簡(jiǎn)單的省市區(qū)三級(jí)聯(lián)動(dòng)特效,不需要訪問(wèn)后臺(tái)服務(wù)器端,不使用Ajax,無(wú)刷新,純JS實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)。當(dāng)省市區(qū)數(shù)據(jù)變動(dòng)是只需調(diào)正js即可。2015-05-05
js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能
行為驗(yàn)證碼通過(guò)用戶的操作來(lái)完成驗(yàn)證,常見(jiàn)的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景
這篇文章主要介紹了微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
微信小程序 swiper 組件遇到的問(wèn)題及解決方法
這篇文章主要介紹了微信小程序 swiper 組件遇到的問(wèn)題及解決方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
10種JavaScript最常見(jiàn)的錯(cuò)誤(小結(jié))
這篇文章主要介紹了10種JavaScript最常見(jiàn)的錯(cuò)誤(小結(jié)),查看了數(shù)千個(gè)項(xiàng)目后,發(fā)現(xiàn)了 10 個(gè)最常見(jiàn)的 JavaScript 錯(cuò)誤。我們會(huì)告訴你什么原因?qū)е铝诉@些錯(cuò)誤,以及如何防止這些錯(cuò)誤發(fā)生2019-06-06

