本发明涉及Web项目开发技术领域技术领域,具体地说是一种模态和非模态窗口在浏览器中兼容性的解决方法。
背景技术:
在Web项目的开发中,开发人员经常会使用到窗口对话框,通过窗口来给用户展现信息。窗口对话框分为模态对话框和非模态对话框,这两种概念来自于GUI程序。开发人员使用这两种窗体对话框时,在不同浏览器中,可能会存在兼容性问题而无法显示。
浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
对于浏览器,虽然现在ie依然在浏览器市场大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要工具,比如firefox、theworld、maxthon、chrome、opera等等,在用户使用比较多的浏览器中,分为2大派系 - ie内核和非ie内核,像theworld、maxthon、greenbrower等等都属于ie内核,而firefox、chrome、opera则 为非ie内核,众多的浏览器使我们的web程序就出现了兼容问题,像ie就有ie 6、ie7、ie8之分,同样的样式控制和js脚本,在不同的ie版本中也会出现不同的效果,甚至bug,何况在非ie内核的firefox、chrome、opera了。从市场份额分析,目前ie依然是浏览器市场老大,并会在很长一段时间内很难改变,不过我们不能忽略firefox以及其他浏览器的快速成长,未来我们没有办法估计,很多初级用户还没有看到其他非ie内核的优势,当他们发现时,我们的在去满足他们的需求是否已经晚了呢,所以我们必须做到多浏览器的兼容。
模态对话框在打开后会阻断其父窗口接受键盘及鼠标消息,并且使父窗口是去焦点。只有当用户关闭当前的模态对话框后,父窗口才可再次得到焦点以及恢复各种消息。典型的模态对话框有:打开/另存为对话框;非模态对话框则不会阻断其父窗口接受键盘及鼠标消息,其父窗口仍然可以获得焦点。典型的非模态对话框有:查找/搜索对话框。
window.showModalDialog 方法不是 W3C 规范中的方法,其最初由 IE4 引入,用来创建一个模态对话框,并在其中显示 HTML 页面。其格式为:
vReturnValue=object.showModalDialog(sURL [,vArguments] [, sFeatures])
三个参数分别为:对话框加载的 HTML 页面的 URL、传入对话框页面的参数,控制对话框展现效果的参数。
其中可在对话框页面中通过document.arguments 获得 vArguments 传入的参数的内容。
在 Firefox 3 中,也实现了对 window.showModalDialog 方法,其调用方式与IE类似,只是有个别参数没有实现。
window.showModelessDialog 方法也不是 W3C 规范中的方法,其最初由 IE5 引入,用来创建一个非模态对话框,并在其中显示 HTML页面。其格式为:
vReturnValue=object.showModelessDialog(sURL [, vArguments] [, sFeatures])
使用方法与 showModalDialog 类似。
Web项目开发人员若在javaScript在脚本代码中使用了 showModalDialog 与 showModelessDialog 方法,则可能会导致运行效果不是预期效果,甚至可能导致代码报错。原因是不同浏览器对两种方法的支持情况不同,有的浏览器不兼容。
技术实现要素:
本发明的技术任务是针对以上不足之处,提供一种模态和非模态窗口在浏览器中兼容性的解决方法,通过使用window.open方法解决模态和非模态窗口在浏览器中兼容性问题。
本发明解决其技术问题所采用的技术方案是:
一种模态和非模态窗口在浏览器中兼容性的解决方法,使用window.open方法解决模态和非模态窗口在浏览器中兼容性问题,把站点之间的数据,用url参数来传,保证参数不会因域名不一样而不能获取数据;用openpage 和closePage页面封装这些参数,而不是简单的把参数,在2个站点之间,传来传去.做的效果给人感觉像掉用 window.howModalDialog 一样。
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能,为解决上述问题,提升提升浏览器的兼容性,我们采用以下解决方案:直接使用window.open(pageURL,name,parameters)方式打开新窗口,需要将子窗口中的参数传递回父窗口时,可以在子窗口中使用window.opener来访问父窗口。
window.open(pageURL,name,parameters), 其中:pageURL 为子窗口路径,name 为子窗口句柄,parameters 为窗口参数。
window.opener 返回的是创建当前窗口的那个父窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:
window.opener.document.getElementById("name").value = "输入的数据"。
本发明的一种模态和非模态窗口在浏览器中兼容性的解决方法和现有技术相比,具有以下有益效果:
用window.open方法解决模态和非模态窗口在浏览器中兼容性问题,把站点之间的数据,用url参数来传,保证参数不会因域名不一样而不能获取数据;
用openpage 和closePage页面封装这些参数,而不是简单的把参数,在2个站点之间,传来传去.做的效果给人感觉像掉用 window.howModalDialog 一样。
具体实施方式
下面结合具体实施例对本发明作进一步说明。
首先分析各浏览器对 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 方法创建模态对话框,载入 inner.html,并传入 modaldialog.html 页面的 window 对象。
页面 inner.html,打开后,文本框 INPUT[id= "dialogtext "] 的 value 初始值为页面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值,当改变 INPUT[id= "dialogtext "] 的 value 值并点击 "OK " 按钮后,模态对话框关闭,页面modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值将变为模态对话框内文本框中的字符串。
这段代码在不同的浏览器环境中的表现如下:
描述/浏览器 IE6 IE7 IE8 Firefox Safari/Chrome/Opera
window.showModalDialog 返回值 = function 成功/成功/成功
弹出对话框 成功/成功/失败
对话框为模态对话框 成功/失败/失败
对话框与父窗口通过 arguments 的交互/成功/失败/失败
可见,各浏览器的 window 对象中均包含 showModalDialog 方法,且均返回 function () { [native code] }。
在 IE Firefox Safari 中,对 showModalDialog 支持较好,弹出的窗口为模态对话框,父窗口失去焦点,且通过 arguments 参数,父窗口与模态对话框直接成功完成数据交互;
在 Chrome 中,虽然通过 showModalDialog 成功弹出了对话框,但此对话框并不是模态的,父窗口仍然可以获得焦点,且数据交互失败,很类似于 window.open 方法;
在 Opera 中,虽然 window.showModalDialog 返回为真,但弹不出对话框,也不能实现其功能。
下面分析各浏览器对 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 方法。
这段代码在不同的浏览器环境中的表现如下:
描述/浏览器 IE6 IE7 IE8 /Firefox Chrome Safari Opera
window.showModelessDialog 返回值 = function 成功/失败
showModelessDialog 方法目前仅被 IE 支持,在其他浏览器window.showModelessDialog 均返回 "undefined "。
我们访问的时候,其中最重要的原理,把站点之间的数据,用url参数来传,这样就可以保证参数不会因域名不一样,而不能获取数据。而我们用openpage 和closePage页面,最主要目的是封装这些参数,而不是简单的把参数,在2个站点之间,传来传去.做的效果给人感觉像掉用 window.howModalDialog 一样。
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能,为解决上述问题,提升提升浏览器的兼容性,我们采用以下解决方案:
1.直接使用window.open(pageURL,name,parameters)方式打开新窗口。
2.如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。
实施例
<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>
脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照。
如果需要将子窗口中的参数传递回父窗口,在子窗口中使用window.opener来访问父窗口:
window.opener 返回的是创建当前窗口的那个父窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:
window.opener.document.getElementById("name").value = "输入的数据"。
通过上面具体实施方式,所述技术领域的技术人员可容易的实现本发明。但是应当理解,本发明并不限于上述的具体实施方式。在公开的实施方式的基础上,所述技术领域的技术人员可任意组合不同的技术特征,从而实现不同的技术方案。
除说明书所述的技术特征外,均为本专业技术人员的已知技术。