本發(fā)明涉及Web項(xiàng)目開發(fā)技術(shù)領(lǐng)域技術(shù)領(lǐng)域，具體地說是一種模態(tài)和非模態(tài)窗口在瀏覽器中兼容性的解決方法。
背景技術(shù)：
在Web項(xiàng)目的開發(fā)中，開發(fā)人員經(jīng)常會(huì)使用到窗口對(duì)話框，通過窗口來給用戶展現(xiàn)信息。窗口對(duì)話框分為模態(tài)對(duì)話框和非模態(tài)對(duì)話框，這兩種概念來自于GUI程序。開發(fā)人員使用這兩種窗體對(duì)話框時(shí)，在不同瀏覽器中，可能會(huì)存在兼容性問題而無法顯示。
瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是前端開發(fā)人員經(jīng)常會(huì)碰到和必須要解決的問題。
對(duì)于瀏覽器，雖然現(xiàn)在ie依然在瀏覽器市場(chǎng)大約占有67%的份額，但是由于其各方面的欠缺，用戶開始選擇其他瀏覽器作為自己瀏覽網(wǎng)頁的主要工具，比如firefox、theworld、maxthon、chrome、opera等等，在用戶使用比較多的瀏覽器中，分為2大派系 - ie內(nèi)核和非ie內(nèi)核，像theworld、maxthon、greenbrower等等都屬于ie內(nèi)核，而firefox、chrome、opera則 為非ie內(nèi)核，眾多的瀏覽器使我們的web程序就出現(xiàn)了兼容問題，像ie就有ie 6、ie7、ie8之分，同樣的樣式控制和js腳本，在不同的ie版本中也會(huì)出現(xiàn)不同的效果，甚至bug，何況在非ie內(nèi)核的firefox、chrome、opera了。從市場(chǎng)份額分析，目前ie依然是瀏覽器市場(chǎng)老大，并會(huì)在很長(zhǎng)一段時(shí)間內(nèi)很難改變，不過我們不能忽略firefox以及其他瀏覽器的快速成長(zhǎng)，未來我們沒有辦法估計(jì)，很多初級(jí)用戶還沒有看到其他非ie內(nèi)核的優(yōu)勢(shì)，當(dāng)他們發(fā)現(xiàn)時(shí)，我們的在去滿足他們的需求是否已經(jīng)晚了呢，所以我們必須做到多瀏覽器的兼容。
模態(tài)對(duì)話框在打開后會(huì)阻斷其父窗口接受鍵盤及鼠標(biāo)消息，并且使父窗口是去焦點(diǎn)。只有當(dāng)用戶關(guān)閉當(dāng)前的模態(tài)對(duì)話框后，父窗口才可再次得到焦點(diǎn)以及恢復(fù)各種消息。典型的模態(tài)對(duì)話框有：打開/另存為對(duì)話框；非模態(tài)對(duì)話框則不會(huì)阻斷其父窗口接受鍵盤及鼠標(biāo)消息，其父窗口仍然可以獲得焦點(diǎn)。典型的非模態(tài)對(duì)話框有：查找/搜索對(duì)話框。
window.showModalDialog 方法不是 W3C 規(guī)范中的方法，其最初由 IE4 引入，用來創(chuàng)建一個(gè)模態(tài)對(duì)話框，并在其中顯示 HTML 頁面。其格式為：
vReturnValue=object.showModalDialog(sURL [,vArguments] [, sFeatures])
三個(gè)參數(shù)分別為：對(duì)話框加載的 HTML 頁面的 URL、傳入對(duì)話框頁面的參數(shù)，控制對(duì)話框展現(xiàn)效果的參數(shù)。
其中可在對(duì)話框頁面中通過document.arguments 獲得 vArguments 傳入的參數(shù)的內(nèi)容。
在 Firefox 3 中，也實(shí)現(xiàn)了對(duì) window.showModalDialog 方法，其調(diào)用方式與IE類似，只是有個(gè)別參數(shù)沒有實(shí)現(xiàn)。
window.showModelessDialog 方法也不是 W3C 規(guī)范中的方法，其最初由 IE5 引入，用來創(chuàng)建一個(gè)非模態(tài)對(duì)話框，并在其中顯示 HTML頁面。其格式為：
vReturnValue=object.showModelessDialog(sURL [, vArguments] [, sFeatures])
使用方法與 showModalDialog 類似。
Web項(xiàng)目開發(fā)人員若在javaScript在腳本代碼中使用了 showModalDialog 與 showModelessDialog 方法，則可能會(huì)導(dǎo)致運(yùn)行效果不是預(yù)期效果，甚至可能導(dǎo)致代碼報(bào)錯(cuò)。原因是不同瀏覽器對(duì)兩種方法的支持情況不同，有的瀏覽器不兼容。
技術(shù)實(shí)現(xiàn)要素：
本發(fā)明的技術(shù)任務(wù)是針對(duì)以上不足之處，提供一種模態(tài)和非模態(tài)窗口在瀏覽器中兼容性的解決方法，通過使用window.open方法解決模態(tài)和非模態(tài)窗口在瀏覽器中兼容性問題。
本發(fā)明解決其技術(shù)問題所采用的技術(shù)方案是：
一種模態(tài)和非模態(tài)窗口在瀏覽器中兼容性的解決方法，使用window.open方法解決模態(tài)和非模態(tài)窗口在瀏覽器中兼容性問題，把站點(diǎn)之間的數(shù)據(jù),用url參數(shù)來傳，保證參數(shù)不會(huì)因域名不一樣而不能獲取數(shù)據(jù)；用openpage 和closePage頁面封裝這些參數(shù)，而不是簡(jiǎn)單的把參數(shù),在2個(gè)站點(diǎn)之間,傳來傳去.做的效果給人感覺像掉用 window.howModalDialog 一樣。
IE下,可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口;Firefox下則不能，為解決上述問題，提升提升瀏覽器的兼容性，我們采用以下解決方案：直接使用window.open(pageURL,name,parameters)方式打開新窗口，需要將子窗口中的參數(shù)傳遞回父窗口時(shí),可以在子窗口中使用window.opener來訪問父窗口。
window.open(pageURL,name,parameters)， 其中：pageURL 為子窗口路徑，name 為子窗口句柄，parameters 為窗口參數(shù)。
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)父窗口的引用，比如點(diǎn)擊了a.htm上的一個(gè)鏈接而打開了b.htm，然后我們打算在b.htm上輸入一個(gè)值然后賦予a.htm上的一個(gè)id為“name”的textbox中，就可以寫為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)"。
本發(fā)明的一種模態(tài)和非模態(tài)窗口在瀏覽器中兼容性的解決方法和現(xiàn)有技術(shù)相比，具有以下有益效果：
用window.open方法解決模態(tài)和非模態(tài)窗口在瀏覽器中兼容性問題，把站點(diǎn)之間的數(shù)據(jù),用url參數(shù)來傳，保證參數(shù)不會(huì)因域名不一樣而不能獲取數(shù)據(jù)；
用openpage 和closePage頁面封裝這些參數(shù)，而不是簡(jiǎn)單的把參數(shù),在2個(gè)站點(diǎn)之間,傳來傳去.做的效果給人感覺像掉用 window.howModalDialog 一樣。
具體實(shí)施方式
下面結(jié)合具體實(shí)施例對(duì)本發(fā)明作進(jìn)一步說明。
首先分析各瀏覽器對(duì) showModalDialog 方法的支持情況。分析以下代碼：
modaldialog.html：
<input type= "text " id= "textbox " value= "defaultValue " /><br />
<button id= "open1 ">Open ModalDialog</button>
<script>
var updatetext = " ";
function update() {
document.getElementById( "textbox ").value = updatetext;
}
document.getElementById( "open1 ").onclick = function () {
window.showModalDialog( "inner.html ", window);
}
</script>
inner.html：
<input type= "text " id= "dialogtext " /><button id= "ok ">OK!</button>
<script>
document.getElementById( "dialogtext ").value =
window.dialogArguments.document.getElementById( "textbox ").value;
document.getElementById( "ok ").onclick = function () {
window.dialogArguments.updatetext =
document.getElementById( "dialogtext ").value;
window.dialogArguments.update();
window.close();
}
</script>
上面代碼中，modaldialog.html 使用 window.showModalDialog 方法創(chuàng)建模態(tài)對(duì)話框，載入 inner.html，并傳入 modaldialog.html 頁面的 window 對(duì)象。
頁面 inner.html，打開后，文本框 INPUT[id= "dialogtext "] 的 value 初始值為頁面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值，當(dāng)改變 INPUT[id= "dialogtext "] 的 value 值并點(diǎn)擊 "OK " 按鈕后，模態(tài)對(duì)話框關(guān)閉，頁面modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值將變?yōu)槟B(tài)對(duì)話框內(nèi)文本框中的字符串。
這段代碼在不同的瀏覽器環(huán)境中的表現(xiàn)如下：
描述/瀏覽器 IE6 IE7 IE8 Firefox Safari/Chrome/Opera
window.showModalDialog 返回值 = function 成功/成功/成功
彈出對(duì)話框 成功/成功/失敗
對(duì)話框?yàn)槟B(tài)對(duì)話框 成功/失敗/失敗
對(duì)話框與父窗口通過 arguments 的交互/成功/失敗/失敗
可見，各瀏覽器的 window 對(duì)象中均包含 showModalDialog 方法，且均返回 function () { [native code] }。
在 IE Firefox Safari 中，對(duì) showModalDialog 支持較好，彈出的窗口為模態(tài)對(duì)話框，父窗口失去焦點(diǎn)，且通過 arguments 參數(shù)，父窗口與模態(tài)對(duì)話框直接成功完成數(shù)據(jù)交互；
在 Chrome 中，雖然通過 showModalDialog 成功彈出了對(duì)話框，但此對(duì)話框并不是模態(tài)的，父窗口仍然可以獲得焦點(diǎn)，且數(shù)據(jù)交互失敗，很類似于 window.open 方法；
在 Opera 中，雖然 window.showModalDialog 返回為真，但彈不出對(duì)話框，也不能實(shí)現(xiàn)其功能。
下面分析各瀏覽器對(duì) showModelessDialog 方法的支持情況。
modelessdialog.html：
<input type="text" id="textbox" value="defaultValue" /><br />
<button id="open1">Open ModelessDialog</button>
<script>
var updatetext = "";
function update() {
document.getElementById("textbox").value = updatetext;
}
document.getElementById("open1").onclick = function () {
window.showModelessDialog("inner.html", window);
}
</script>
inner.html：
<input type="text" id="dialogtext" /><button id="ok" >OK!</button>
<script>
document.getElementById("dialogtext").value =
window.dialogArguments.document.getElementById( "textbox").value;
document.getElementById("ok").onclick = function () {
window.dialogArguments.updatetext =
document.getElementById("dialogtext").value;
window.dialogArguments.update();
window.close();
}
</script>
上面代碼和上一段的類似，只不過將 showModalDialog 方法換成了 showModelessDialog 方法。
這段代碼在不同的瀏覽器環(huán)境中的表現(xiàn)如下：
描述/瀏覽器 IE6 IE7 IE8 /Firefox Chrome Safari Opera
window.showModelessDialog 返回值 = function 成功/失敗
showModelessDialog 方法目前僅被 IE 支持，在其他瀏覽器window.showModelessDialog 均返回 "undefined "。
我們?cè)L問的時(shí)候,其中最重要的原理,把站點(diǎn)之間的數(shù)據(jù)，用url參數(shù)來傳,這樣就可以保證參數(shù)不會(huì)因域名不一樣，而不能獲取數(shù)據(jù)。而我們用openpage 和closePage頁面，最主要目的是封裝這些參數(shù),而不是簡(jiǎn)單的把參數(shù)，在2個(gè)站點(diǎn)之間,傳來傳去.做的效果給人感覺像掉用 window.howModalDialog 一樣。
IE下,可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口；Firefox下則不能，為解決上述問題，提升提升瀏覽器的兼容性，我們采用以下解決方案：
1.直接使用window.open(pageURL,name,parameters)方式打開新窗口。
2.如果需要將子窗口中的參數(shù)傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口。
實(shí)施例
<SCRIPT>
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>
腳本運(yùn)行后，page.html將在新窗體newwindow中打開，寬為100，高為400，距屏頂0象素，屏左0象素，無工具條，無菜單條，無滾動(dòng)條，不可調(diào)整大小，無地址欄，無狀態(tài)欄。請(qǐng)對(duì)照。
如果需要將子窗口中的參數(shù)傳遞回父窗口,在子窗口中使用window.opener來訪問父窗口：
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)父窗口的引用，比如點(diǎn)擊了a.htm上的一個(gè)鏈接而打開了b.htm，然后我們打算在b.htm上輸入一個(gè)值然后賦予a.htm上的一個(gè)id為“name”的textbox中，就可以寫為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)"。
通過上面具體實(shí)施方式，所述技術(shù)領(lǐng)域的技術(shù)人員可容易的實(shí)現(xiàn)本發(fā)明。但是應(yīng)當(dāng)理解，本發(fā)明并不限于上述的具體實(shí)施方式。在公開的實(shí)施方式的基礎(chǔ)上，所述技術(shù)領(lǐng)域的技術(shù)人員可任意組合不同的技術(shù)特征，從而實(shí)現(xiàn)不同的技術(shù)方案。
除說明書所述的技術(shù)特征外，均為本專業(yè)技術(shù)人員的已知技術(shù)。