JavaEE
鴻蒙應(yīng)用開(kāi)發(fā)
HTML&JS+前端
Python+大數(shù)據(jù)開(kāi)發(fā)
人工智能開(kāi)發(fā)
電商視覺(jué)設(shè)計(jì)
軟件測(cè)試
新媒體+短視頻
集成電路應(yīng)用開(kāi)發(fā)
C/C++
狂野架構(gòu)師
IP短視頻
web前端開(kāi)發(fā)培訓(xùn)之超強(qiáng)的JS總結(jié)（一）
更新時(shí)間:2016年10月12日14時(shí)45分 來(lái)源:傳智播客前端與移動(dòng)開(kāi)發(fā)學(xué)院 瀏覽次數(shù):
1. 清除視窗或frame中的內(nèi)容
document.clear();
document.close(); document.open(); document.write(“”);
2. 在不同文件之間穿梭
document.back(); document.forward();
history.go(-1); history.go(1);
3. 輸入框
var the_url = prompt("What's the URL?","");
if（the_url==””||the_url==null）{
the_url=”www.google.com”;
}
注：利用the_url==null可以判斷選取的是取消按鈕
4. 確定框
<script language="javascript">
function delete_confirm(qyyb_no,inspect_time,company_name){
<!—點(diǎn)擊確定按鈕-- >
if(confirm("確定要?jiǎng)h除該企業(yè)月報(bào)嗎？"))
{
location.href='<%=request.getContextPath()%>/webcontroller?functionId=2015&inspect_time='+inspect_time+'&company_name='+company_name+'&qyyb_no='+qyyb_no;
alert('企業(yè)月報(bào)刪除成功！');
window.close();
}
<!—點(diǎn)擊取消按鈕-- >
else{
}
}
</script>
5. 內(nèi)置變量top，該變量永遠(yuǎn)指分割窗口最高層次的瀏覽器窗口。如果你計(jì)劃從分割窗口的最高層次開(kāi)始執(zhí)行命令，你就可以用top變量。
<a href="#" onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>
執(zhí)行該語(yǔ)句時(shí)，JavaScript從窗口等級(jí)的最高層開(kāi)始，該層中包含著分割窗口的窗框，從中發(fā)現(xiàn)名叫target_frame的分割窗口，由于該分割窗口是也一個(gè)窗口，所它具有窗口的文件（document）屬性。JavaScript找到其document屬性，并調(diào)用writeln()方法。其執(zhí)行結(jié)果是在文件中寫(xiě)出"Monkey do!" 。writeln()是文件（document）對(duì)象的方法，所以我們必須寫(xiě)document.writeln()
6. 窗口有一個(gè)屬性叫做document，它用于引用到窗口中實(shí)際的HTML文件。該document
屬性本身就是一個(gè)對(duì)象。在談到圖象掉換（image swap）的時(shí)候，我們見(jiàn)到過(guò)這樣的例子。你可以用下列語(yǔ)句作圖象掉換:
<a href="#">交換</a>
上述語(yǔ)句的意思是說(shuō)：找到window的document屬性，找到the_image的src屬性并將其設(shè)置為圖象button_d.gif。這樣寫(xiě)是因?yàn)榇翱冢╳indows）是對(duì)象，窗口內(nèi)的文件（documents）是對(duì)象，而文件（document）內(nèi)的圖象（images）頁(yè)是對(duì)象。
看起來(lái)似乎很復(fù)雜，但它的結(jié)構(gòu)很清楚。JavaScript的文件對(duì)象模塊（Document Object Model）描述了對(duì)象之間的等級(jí)關(guān)系。
7. Windows特性： window.open()中的第三個(gè)參數(shù)是你想要你的窗口表現(xiàn)的一組特性。如果你不完全確定你的參數(shù)，則以用戶瀏覽器的缺省值替代。
然而，如果你指定了一些特性參數(shù)，則窗口將以參數(shù)設(shè)定值規(guī)定的出現(xiàn)。特性參數(shù)是以一組逗號(hào)分隔的序列出現(xiàn)的。
例如，如果你是這么寫(xiě)的：
window.open("some_url","window_name","location,menubar");
你將得到一個(gè)規(guī)定了URL，窗口名及菜單條（文件，編輯條等等）的窗口。注意別在字符串中加入任何空格，這將使得有些瀏覽器出錯(cuò)。
看一下另一個(gè)例子：
window.open("some_url","window_name","location,height=100,width=100");
這將打開(kāi)一個(gè)高寬各為100像素的窗口。再次請(qǐng)注意別在字符串中加空格。
這里是一組可以在字符串中引用的特性參數(shù)：
menubar （菜單條）
這是個(gè)在大多數(shù)軟件應(yīng)用中都引用的函數(shù)行。一般包括有文件，編輯及其他一些條目。
status（狀態(tài)條）
這是位于你的窗口下部的信息條。當(dāng)你的鼠標(biāo)移到一個(gè)鏈接上時(shí)，鏈接的URL就在這個(gè)狀態(tài)條上出現(xiàn)。你可以將狀態(tài)條上顯示的內(nèi)容搬到一個(gè)滾動(dòng)的marquee 中去。我不打算為你做這個(gè)示例，如果你想知道怎樣做，自己設(shè)法解決！
scrollbars （滾動(dòng)條）
當(dāng)需要時(shí)允許滾動(dòng)條出現(xiàn)。
resizable （重調(diào)）
當(dāng)重調(diào)參數(shù)被列出，窗口將可被重調(diào)。注意它的拼法，我就經(jīng)常搞錯(cuò)。
width （寬度）
以像素點(diǎn)表達(dá)的窗口寬。
height（高度）
以像素點(diǎn)表達(dá)的窗口高。
toolbar （工具條）
Home button, among others.
瀏覽器工具條，包括后退，前進(jìn)鈕，停止鈕，以及HOME鈕等等。
location （定位區(qū)）
你可以鍵入U(xiǎn)RL 的瀏覽器文本區(qū)。
directories （指示區(qū)）
如Netscape瀏覽器中所在的"What's new," "What's cool,"等等。
8、showModalDialog和showModelessDialog
Javascript有許多內(nèi)建的方法來(lái)產(chǎn)生對(duì)話框，如：window.alert(), window.confirm(),window.prompt().等。然而IE提供更多的方法支持對(duì)話框。如：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用來(lái)創(chuàng)建一個(gè)顯示HTML內(nèi)容的模態(tài)對(duì)話框，由于是對(duì)話框，因此它并沒(méi)有一般用window.open()打開(kāi)的窗口的所有屬性。
window.showModelessDialog()方法用來(lái)創(chuàng)建一個(gè)顯示HTML內(nèi)容的非模態(tài)對(duì)話框。
當(dāng)我們用showModelessDialog()打開(kāi)窗口時(shí)，不必用window.close()去關(guān)閉它，當(dāng)以非模態(tài)方式［IE5］打開(kāi)時(shí)，打開(kāi)對(duì)話框的窗口仍可以進(jìn)行其他的操作，即對(duì)話框不總是最上面的焦點(diǎn)，當(dāng)打開(kāi)它的窗口ＵＲＬ改變時(shí)，它自動(dòng)關(guān)閉。而模態(tài)［ＩＥ４］方式的對(duì)話框始終有焦點(diǎn)（焦點(diǎn)不可移走，直到它關(guān)閉）。模態(tài)對(duì)話框和打開(kāi)它的窗口相聯(lián)系，因此我們打開(kāi)另外的窗口時(shí)，他們的鏈接關(guān)系依然保存，并且隱藏在活動(dòng)窗口的下面。
使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments][, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments][, sFeatures])
參數(shù)說(shuō)明：
sURL
必選參數(shù)，類(lèi)型：字符串。用來(lái)指定對(duì)話框要顯示的文檔的URL。
vArguments
可選參數(shù)，類(lèi)型：變體。用來(lái)向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類(lèi)型不限，包括數(shù)組等。對(duì)話框通過(guò)window.dialogArguments來(lái)取得傳遞進(jìn)來(lái)的參數(shù)。
sFeatures
可選參數(shù)，類(lèi)型：字符串。用來(lái)描述對(duì)話框的外觀等信息，可以使用以下的一個(gè)或幾個(gè)，用分號(hào)“;”隔開(kāi)。
dialogHeight 對(duì)話框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認(rèn)的單位是em，而ＩＥ５中是px，為方便其見(jiàn)，在定義modal方式的對(duì)話框時(shí)，用px做單位。
dialogWidth: 對(duì)話框?qū)挾取?/font>
dialogLeft: 距離桌面左的距離。
dialogTop: 離桌面上的距離。
center: {yes | no | 1 | 0 }：窗口是否居中，默認(rèn)yes，但仍可以指定高度和寬度。
help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認(rèn)yes。
resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。默認(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)行傳遞的。類(lèi)型不限制，對(duì)于字符串類(lèi)型，最大為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)
</script>
test5.htm
===================
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value="返回" type=button>
</form>
常見(jiàn)問(wèn)題：
1，如何在模態(tài)對(duì)話框中進(jìn)行提交而不新開(kāi)窗口？
如果你 的瀏覽器是IE5.5+,可以在對(duì)話框中使用帶name屬性的iframe，提交時(shí)可以制定target為該iframe的name。對(duì)于IE4+，你可以用高度為0的frame來(lái)作：例子，
test6.htm
===================
<script>
window.showModalDialog("test7.htm")
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通過(guò)http://servername/virtualdirname/test.htm?name=mxh方式直接向?qū)υ捒騻鬟f參數(shù)嗎？
答案是不能。但在frame里是可以的。
showModalDialog和showModelessDialog的異同
同：兩者彈出的窗體不能刷新
異：前者是模態(tài)窗口，始終獲得焦點(diǎn)；后者是非模態(tài)窗口，只不過(guò)彈出一個(gè)頁(yè)面，還可以操作父窗口。
關(guān)閉showModalDialog和showModelessDialog彈出的窗口
<INPUT type="button" value="ButtonClick">
怎樣才讓在showModalDialog和showModelessDialog的彈出新窗口里操作button,不彈出新窗口？
在<head>和</head>之間加<base target="_self">
showModalDialog的返回值
參照例子：
t1.html:
<script language="javascript">
function showpage()
{
alert(showModalDialog("t2.html"));
}
</script>
<input type="button" value="getval">
t2.html
<HTML>
<HEAD>
<Script language="javascript">
<
function SetVal()
{
returnValue="abc";
close();
}
//-->
</Script>
</HEAD>
<BODY>
<input type="button" value="Btn1">
</BODY>
</HTML>
window.showModalDialog ("dic_functionlist.jsp?dicid="+id,window,'dialogheight:300pt; dialogwidth:340pt; dialogtop:120pt; dialogleft:240pt;scrollbars:no;resizable:no;location:no;status:no');
9.內(nèi)置變量是parent，指的是包含當(dāng)前分割窗口的母窗口。如果在一個(gè)窗口內(nèi)有分割窗口，而在其中的一個(gè)分割窗口中又包含著分割窗口，則第2層的分割窗口可以用parent變量引用包含它的母分割窗口。
10. 復(fù)選框是否選中
var is_checked =
window.document.the_form.the_checkbox.checked;
if (is_checked == true)
{
alert("Yup, it's checked!");
} else {
alert("Nope, it's not checked.");
}
11. 復(fù)選框?qū)嵗?
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#"
onClick=
"window.document.form_1.check_1.checked=true;
return false;">
Click to check Checkbox 1</a>
<a href="#"box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, 'Microsoft YaHei', Tahoma, Simsun, sans-serif; line-height: 25.2px;">return false;">
Click to uncheck Checkbox 1</a>
<a href="#"
onClick="alert(window.document.form_1.check_1.checked);
return false;">
Click to see the value of Checkbox 1</a>
注意我在鏈接中始終加入了return false，以防止瀏覽器刷新頁(yè)面又回到原來(lái)的內(nèi)容。
復(fù)選框的事件處理器是onClick。當(dāng)某人點(diǎn)擊復(fù)選框時(shí)，onClick事件處理器即發(fā)揮作用。
12. 復(fù)選框?qū)嵗?
<form name="form_2">
<input type="checkbox" name ="check_1"
onClick="switchLight();">The Light Switch
</form>
當(dāng)某人點(diǎn)擊復(fù)選框時(shí)，onClick處理器被激活并執(zhí)行函數(shù)switchLight()，以下為函數(shù)switchLight() 的編碼（它置于網(wǎng)頁(yè)首部中）:
function switchLight()
{
var the_box = window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false) {
alert("Hey! Turn that back on!");
document.bgColor='black';
} else {
alert("Thanks!");
document.bgColor='white';
}
}
13. 單選框?qū)嵗?/strong>
表單編碼如下
<form name="form_1">
<input type="radio" name ="radio">Light off
<input type="radio" name ="radio" checked>Light on
</form>
當(dāng)?shù)谝粋€(gè)單選框被選中時(shí)，函數(shù)offButton() 被調(diào)用。函數(shù)如下：
function offButton()
{
var the_box = window.document.form_1.radio[0];
if (the_box.checked == true)
{
window.document.form_1.radio[1].checked = false;
document.bgColor='black';
alert("Hey! Turn that back on!");
}
}
這個(gè)例子很象前面的復(fù)選框例子，主要的區(qū)別在于該行：
window.document.form_1.radio[1].checked = false;
該行指令指示JavaScript在該按鈕被點(diǎn)擊時(shí)關(guān)閉另外一個(gè)按鈕。由于另外一個(gè)按鈕的函數(shù)同這個(gè)很相似：
function onButton()
{
var the_box = window.document.form_1.radio[1];
if (the_box.checked == true)
{
window.document.form_1.radio[0].checked = false;
document.bgColor='white';
alert("Thanks!");
}
}
14. 下列選單
<select name="pulldown_1" size=1>
<option>probiscus
<option>spider
<option>lemur
<option>chimp
</select>
注意這個(gè)選單的名稱是pulldown_1，但各個(gè)選項(xiàng)沒(méi)有名稱。所以要調(diào)用其中的各個(gè)選項(xiàng)則有點(diǎn)困難。
幸好數(shù)組可以幫助我們調(diào)用其中的選項(xiàng)。如果你想改變?cè)撓铝羞x單中的第2個(gè)選項(xiàng)，你可以這樣做：
window.document.form_1.pulldown_1.options[1].text = 'new_text';
這是因?yàn)檫x單的元素有一個(gè)選項(xiàng)屬性，而該屬性是選單所有選項(xiàng)的集合而成的數(shù)組。
除了選項(xiàng)屬性，選單還有一項(xiàng)屬性叫做selectedIndex。大筆一個(gè)選項(xiàng)被選擇后，selectedIndex屬性將變成被選項(xiàng)的數(shù)組索引號(hào)（序列號(hào)）。選擇第2個(gè)列表選單中的一個(gè)選項(xiàng)，然后檢查索引號(hào)。記住數(shù)組中的第1個(gè)選項(xiàng)的索引號(hào)是0。
<a href="#"box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, 'Microsoft YaHei', Tahoma, Simsun, sans-serif; line-height: 25.2px;">window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>
表單的名稱是form_1，列表選單的名稱是list_1。selectedIndex屬性值為
window.document.form_1.list_1.selectedIndex。你還可
以將selectedIndex設(shè)置如下：
window.document.form_1.list_1.selectedIndex = 1;
并高亮度顯示第2個(gè)選項(xiàng)。一旦你得到被選項(xiàng)的索引號(hào)，你就可以發(fā)現(xiàn)其內(nèi)容：
var the_select = window.document.form_1.list_1;
var the_index = the_select.selectedIndex;
var the_selected = the_select.options[the_index].text;
15. 獲取select組件的被選中的值
function getselected(){
var sel = document.form1.select;
return sel.options[sel.selectedIndex].text;
}
文章轉(zhuǎn)載于：前端網(wǎng)
本文版權(quán)歸傳智播客web前端開(kāi)發(fā)培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端開(kāi)發(fā)培訓(xùn)學(xué)院
首發(fā)：http://8y3kgpwe.cn/web/
document.clear();
document.close(); document.open(); document.write(“”);
2. 在不同文件之間穿梭
document.back(); document.forward();
history.go(-1); history.go(1);
3. 輸入框
var the_url = prompt("What's the URL?","");
if（the_url==””||the_url==null）{
the_url=”www.google.com”;
}
注：利用the_url==null可以判斷選取的是取消按鈕
4. 確定框
<script language="javascript">
function delete_confirm(qyyb_no,inspect_time,company_name){
<!—點(diǎn)擊確定按鈕-- >
if(confirm("確定要?jiǎng)h除該企業(yè)月報(bào)嗎？"))
{
location.href='<%=request.getContextPath()%>/webcontroller?functionId=2015&inspect_time='+inspect_time+'&company_name='+company_name+'&qyyb_no='+qyyb_no;
alert('企業(yè)月報(bào)刪除成功！');
window.close();
}
<!—點(diǎn)擊取消按鈕-- >
else{
}
}
</script>
5. 內(nèi)置變量top，該變量永遠(yuǎn)指分割窗口最高層次的瀏覽器窗口。如果你計(jì)劃從分割窗口的最高層次開(kāi)始執(zhí)行命令，你就可以用top變量。
<a href="#" onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>
執(zhí)行該語(yǔ)句時(shí)，JavaScript從窗口等級(jí)的最高層開(kāi)始，該層中包含著分割窗口的窗框，從中發(fā)現(xiàn)名叫target_frame的分割窗口，由于該分割窗口是也一個(gè)窗口，所它具有窗口的文件（document）屬性。JavaScript找到其document屬性，并調(diào)用writeln()方法。其執(zhí)行結(jié)果是在文件中寫(xiě)出"Monkey do!" 。writeln()是文件（document）對(duì)象的方法，所以我們必須寫(xiě)document.writeln()
6. 窗口有一個(gè)屬性叫做document，它用于引用到窗口中實(shí)際的HTML文件。該document
屬性本身就是一個(gè)對(duì)象。在談到圖象掉換（image swap）的時(shí)候，我們見(jiàn)到過(guò)這樣的例子。你可以用下列語(yǔ)句作圖象掉換:
<a href="#">交換</a>
上述語(yǔ)句的意思是說(shuō)：找到window的document屬性，找到the_image的src屬性并將其設(shè)置為圖象button_d.gif。這樣寫(xiě)是因?yàn)榇翱冢╳indows）是對(duì)象，窗口內(nèi)的文件（documents）是對(duì)象，而文件（document）內(nèi)的圖象（images）頁(yè)是對(duì)象。
看起來(lái)似乎很復(fù)雜，但它的結(jié)構(gòu)很清楚。JavaScript的文件對(duì)象模塊（Document Object Model）描述了對(duì)象之間的等級(jí)關(guān)系。
7. Windows特性： window.open()中的第三個(gè)參數(shù)是你想要你的窗口表現(xiàn)的一組特性。如果你不完全確定你的參數(shù)，則以用戶瀏覽器的缺省值替代。
然而，如果你指定了一些特性參數(shù)，則窗口將以參數(shù)設(shè)定值規(guī)定的出現(xiàn)。特性參數(shù)是以一組逗號(hào)分隔的序列出現(xiàn)的。
例如，如果你是這么寫(xiě)的：
window.open("some_url","window_name","location,menubar");
你將得到一個(gè)規(guī)定了URL，窗口名及菜單條（文件，編輯條等等）的窗口。注意別在字符串中加入任何空格，這將使得有些瀏覽器出錯(cuò)。
看一下另一個(gè)例子：
window.open("some_url","window_name","location,height=100,width=100");
這將打開(kāi)一個(gè)高寬各為100像素的窗口。再次請(qǐng)注意別在字符串中加空格。
這里是一組可以在字符串中引用的特性參數(shù)：
menubar （菜單條）
這是個(gè)在大多數(shù)軟件應(yīng)用中都引用的函數(shù)行。一般包括有文件，編輯及其他一些條目。
status（狀態(tài)條）
這是位于你的窗口下部的信息條。當(dāng)你的鼠標(biāo)移到一個(gè)鏈接上時(shí)，鏈接的URL就在這個(gè)狀態(tài)條上出現(xiàn)。你可以將狀態(tài)條上顯示的內(nèi)容搬到一個(gè)滾動(dòng)的marquee 中去。我不打算為你做這個(gè)示例，如果你想知道怎樣做，自己設(shè)法解決！
scrollbars （滾動(dòng)條）
當(dāng)需要時(shí)允許滾動(dòng)條出現(xiàn)。
resizable （重調(diào)）
當(dāng)重調(diào)參數(shù)被列出，窗口將可被重調(diào)。注意它的拼法，我就經(jīng)常搞錯(cuò)。
width （寬度）
以像素點(diǎn)表達(dá)的窗口寬。
height（高度）
以像素點(diǎn)表達(dá)的窗口高。
toolbar （工具條）
Home button, among others.
瀏覽器工具條，包括后退，前進(jìn)鈕，停止鈕，以及HOME鈕等等。
location （定位區(qū)）
你可以鍵入U(xiǎn)RL 的瀏覽器文本區(qū)。
directories （指示區(qū)）
如Netscape瀏覽器中所在的"What's new," "What's cool,"等等。
8、showModalDialog和showModelessDialog
Javascript有許多內(nèi)建的方法來(lái)產(chǎn)生對(duì)話框，如：window.alert(), window.confirm(),window.prompt().等。然而IE提供更多的方法支持對(duì)話框。如：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用來(lái)創(chuàng)建一個(gè)顯示HTML內(nèi)容的模態(tài)對(duì)話框，由于是對(duì)話框，因此它并沒(méi)有一般用window.open()打開(kāi)的窗口的所有屬性。
window.showModelessDialog()方法用來(lái)創(chuàng)建一個(gè)顯示HTML內(nèi)容的非模態(tài)對(duì)話框。
當(dāng)我們用showModelessDialog()打開(kāi)窗口時(shí)，不必用window.close()去關(guān)閉它，當(dāng)以非模態(tài)方式［IE5］打開(kāi)時(shí)，打開(kāi)對(duì)話框的窗口仍可以進(jìn)行其他的操作，即對(duì)話框不總是最上面的焦點(diǎn)，當(dāng)打開(kāi)它的窗口ＵＲＬ改變時(shí)，它自動(dòng)關(guān)閉。而模態(tài)［ＩＥ４］方式的對(duì)話框始終有焦點(diǎn)（焦點(diǎn)不可移走，直到它關(guān)閉）。模態(tài)對(duì)話框和打開(kāi)它的窗口相聯(lián)系，因此我們打開(kāi)另外的窗口時(shí)，他們的鏈接關(guān)系依然保存，并且隱藏在活動(dòng)窗口的下面。
使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments][, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments][, sFeatures])
參數(shù)說(shuō)明：
sURL
必選參數(shù)，類(lèi)型：字符串。用來(lái)指定對(duì)話框要顯示的文檔的URL。
vArguments
可選參數(shù)，類(lèi)型：變體。用來(lái)向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類(lèi)型不限，包括數(shù)組等。對(duì)話框通過(guò)window.dialogArguments來(lái)取得傳遞進(jìn)來(lái)的參數(shù)。
sFeatures
可選參數(shù)，類(lèi)型：字符串。用來(lái)描述對(duì)話框的外觀等信息，可以使用以下的一個(gè)或幾個(gè)，用分號(hào)“;”隔開(kāi)。
dialogHeight 對(duì)話框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認(rèn)的單位是em，而ＩＥ５中是px，為方便其見(jiàn)，在定義modal方式的對(duì)話框時(shí)，用px做單位。
dialogWidth: 對(duì)話框?qū)挾取?/font>
dialogLeft: 距離桌面左的距離。
dialogTop: 離桌面上的距離。
center: {yes | no | 1 | 0 }：窗口是否居中，默認(rèn)yes，但仍可以指定高度和寬度。
help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認(rèn)yes。
resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。默認(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)行傳遞的。類(lèi)型不限制，對(duì)于字符串類(lèi)型，最大為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)
</script>
test5.htm
===================
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value="返回" type=button>
</form>
常見(jiàn)問(wèn)題：
1，如何在模態(tài)對(duì)話框中進(jìn)行提交而不新開(kāi)窗口？
如果你 的瀏覽器是IE5.5+,可以在對(duì)話框中使用帶name屬性的iframe，提交時(shí)可以制定target為該iframe的name。對(duì)于IE4+，你可以用高度為0的frame來(lái)作：例子，
test6.htm
===================
<script>
window.showModalDialog("test7.htm")
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通過(guò)http://servername/virtualdirname/test.htm?name=mxh方式直接向?qū)υ捒騻鬟f參數(shù)嗎？
答案是不能。但在frame里是可以的。
showModalDialog和showModelessDialog的異同
同：兩者彈出的窗體不能刷新
異：前者是模態(tài)窗口，始終獲得焦點(diǎn)；后者是非模態(tài)窗口，只不過(guò)彈出一個(gè)頁(yè)面，還可以操作父窗口。
關(guān)閉showModalDialog和showModelessDialog彈出的窗口
<INPUT type="button" value="ButtonClick">
怎樣才讓在showModalDialog和showModelessDialog的彈出新窗口里操作button,不彈出新窗口？
在<head>和</head>之間加<base target="_self">
showModalDialog的返回值
參照例子：
t1.html:
<script language="javascript">
function showpage()
{
alert(showModalDialog("t2.html"));
}
</script>
<input type="button" value="getval">
t2.html
<HTML>
<HEAD>
<Script language="javascript">
<
function SetVal()
{
returnValue="abc";
close();
}
//-->
</Script>
</HEAD>
<BODY>
<input type="button" value="Btn1">
</BODY>
</HTML>
window.showModalDialog ("dic_functionlist.jsp?dicid="+id,window,'dialogheight:300pt; dialogwidth:340pt; dialogtop:120pt; dialogleft:240pt;scrollbars:no;resizable:no;location:no;status:no');
9.內(nèi)置變量是parent，指的是包含當(dāng)前分割窗口的母窗口。如果在一個(gè)窗口內(nèi)有分割窗口，而在其中的一個(gè)分割窗口中又包含著分割窗口，則第2層的分割窗口可以用parent變量引用包含它的母分割窗口。
10. 復(fù)選框是否選中
var is_checked =
window.document.the_form.the_checkbox.checked;
if (is_checked == true)
{
alert("Yup, it's checked!");
} else {
alert("Nope, it's not checked.");
}
11. 復(fù)選框?qū)嵗?
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#"
onClick=
"window.document.form_1.check_1.checked=true;
return false;">
Click to check Checkbox 1</a>
<a href="#"box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, 'Microsoft YaHei', Tahoma, Simsun, sans-serif; line-height: 25.2px;">return false;">
Click to uncheck Checkbox 1</a>
<a href="#"
onClick="alert(window.document.form_1.check_1.checked);
return false;">
Click to see the value of Checkbox 1</a>
注意我在鏈接中始終加入了return false，以防止瀏覽器刷新頁(yè)面又回到原來(lái)的內(nèi)容。
復(fù)選框的事件處理器是onClick。當(dāng)某人點(diǎn)擊復(fù)選框時(shí)，onClick事件處理器即發(fā)揮作用。
12. 復(fù)選框?qū)嵗?
<form name="form_2">
<input type="checkbox" name ="check_1"
onClick="switchLight();">The Light Switch
</form>
當(dāng)某人點(diǎn)擊復(fù)選框時(shí)，onClick處理器被激活并執(zhí)行函數(shù)switchLight()，以下為函數(shù)switchLight() 的編碼（它置于網(wǎng)頁(yè)首部中）:
function switchLight()
{
var the_box = window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false) {
alert("Hey! Turn that back on!");
document.bgColor='black';
} else {
alert("Thanks!");
document.bgColor='white';
}
}
13. 單選框?qū)嵗?/strong>
表單編碼如下
<form name="form_1">
<input type="radio" name ="radio">Light off
<input type="radio" name ="radio" checked>Light on
</form>
當(dāng)?shù)谝粋€(gè)單選框被選中時(shí)，函數(shù)offButton() 被調(diào)用。函數(shù)如下：
function offButton()
{
var the_box = window.document.form_1.radio[0];
if (the_box.checked == true)
{
window.document.form_1.radio[1].checked = false;
document.bgColor='black';
alert("Hey! Turn that back on!");
}
}
這個(gè)例子很象前面的復(fù)選框例子，主要的區(qū)別在于該行：
window.document.form_1.radio[1].checked = false;
該行指令指示JavaScript在該按鈕被點(diǎn)擊時(shí)關(guān)閉另外一個(gè)按鈕。由于另外一個(gè)按鈕的函數(shù)同這個(gè)很相似：
function onButton()
{
var the_box = window.document.form_1.radio[1];
if (the_box.checked == true)
{
window.document.form_1.radio[0].checked = false;
document.bgColor='white';
alert("Thanks!");
}
}
14. 下列選單
<select name="pulldown_1" size=1>
<option>probiscus
<option>spider
<option>lemur
<option>chimp
</select>
注意這個(gè)選單的名稱是pulldown_1，但各個(gè)選項(xiàng)沒(méi)有名稱。所以要調(diào)用其中的各個(gè)選項(xiàng)則有點(diǎn)困難。
幸好數(shù)組可以幫助我們調(diào)用其中的選項(xiàng)。如果你想改變?cè)撓铝羞x單中的第2個(gè)選項(xiàng)，你可以這樣做：
window.document.form_1.pulldown_1.options[1].text = 'new_text';
這是因?yàn)檫x單的元素有一個(gè)選項(xiàng)屬性，而該屬性是選單所有選項(xiàng)的集合而成的數(shù)組。
除了選項(xiàng)屬性，選單還有一項(xiàng)屬性叫做selectedIndex。大筆一個(gè)選項(xiàng)被選擇后，selectedIndex屬性將變成被選項(xiàng)的數(shù)組索引號(hào)（序列號(hào)）。選擇第2個(gè)列表選單中的一個(gè)選項(xiàng)，然后檢查索引號(hào)。記住數(shù)組中的第1個(gè)選項(xiàng)的索引號(hào)是0。
<a href="#"box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, 'Microsoft YaHei', Tahoma, Simsun, sans-serif; line-height: 25.2px;">window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>
表單的名稱是form_1，列表選單的名稱是list_1。selectedIndex屬性值為
window.document.form_1.list_1.selectedIndex。你還可
以將selectedIndex設(shè)置如下：
window.document.form_1.list_1.selectedIndex = 1;
并高亮度顯示第2個(gè)選項(xiàng)。一旦你得到被選項(xiàng)的索引號(hào)，你就可以發(fā)現(xiàn)其內(nèi)容：
var the_select = window.document.form_1.list_1;
var the_index = the_select.selectedIndex;
var the_selected = the_select.options[the_index].text;
15. 獲取select組件的被選中的值
function getselected(){
var sel = document.form1.select;
return sel.options[sel.selectedIndex].text;
}
文章轉(zhuǎn)載于：前端網(wǎng)
本文版權(quán)歸傳智播客web前端開(kāi)發(fā)培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端開(kāi)發(fā)培訓(xùn)學(xué)院
首發(fā)：http://8y3kgpwe.cn/web/
上一篇：web前端開(kāi)發(fā)培訓(xùn)之談一談循環(huán)的性能提升
下一篇：web前端開(kāi)發(fā)培訓(xùn)之如何應(yīng)對(duì)面試官問(wèn)你職業(yè)規(guī)劃問(wèn)題
最新資訊
0
分享到：
文章列表.jpg)
javaee
科列表頁(yè)面右側(cè)廣告圖.jpg)
python
web
design
據(jù)學(xué)科列表頁(yè)右側(cè).png)
cloud
test
c
netmarket
pm
Linux
movies
robot
uids
Python
jdbc
北京校區(qū)
江蘇傳智播客教育科技股份有限公司 版權(quán)所有Copyright 2006-2024 All Rights Reserved 蘇ICP備16007882號(hào)營(yíng)業(yè)執(zhí)照增值電信業(yè)務(wù)經(jīng)營(yíng)許可證出版物經(jīng)營(yíng)許可證
蘇公網(wǎng)安備 32132202001156號(hào)