在b/s系统中,用户经常需要打开子窗口选中某些项目,并将这些项目插入到父窗口的下拉选框中。本来以为在IE中实现这样子窗口操作父窗口的功能十分简单,但是按常规的做法却是行不通的。在google上搜索了一阵也没有好的解决方案。最后看到国外的一个网页上有以下内容:
Explorer 5.0 problems
When it comes to dynamically generating options and selects, Explorer 5.0 on Windows has quite a few problems:
- Generating options in another frame or window doesn't work. Put the script in the page that contains the select. I have heard, but did not test, that this problem still exists in Explorer 6.0
- Generating selects and options through the 'pure' W3C DOM (ie. with any
document.createElement()
) crashes Explorer 5.0 . Solved in 5.5
Generate these selects and options throughinnerHTML
instead. - Generating options from a popup window may crash any Explorer Windows.
I have heard, but did not test, that the script below works fine in IE 5.0:
if ( ! doc)
doc = select.document;
var opt = doc.createElement( ' OPTION ' );
opt.value = value;
opt.text = text;
select.options.add(opt, index);
最后得到了启发,从而实现了这个功能,下面所有可能用到的实现方法的代码。但是在这些代码中有些方法是不可行的。最后有一个表格说明了哪些方法不可行,理由是什么?
HTMLPage.htm
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 1st </ title >
< script language ="javascript" > ...
function AddOpt(text,val)
...{
var slct = document.getElementById("Select1");
var op = new Option(text,val);
slct.add(op);
}
</ script >
</ head >
< body >
< form id ="form1" name ="form1" >
< select id ="Select1" multiple ="multiple" >
< option selected ="selected" value ="1" > 1 </ option >
< option value ="2" > 2 </ option >
< option value ="3" > 3 </ option >
< option value ="4" > 4 </ option >
</ select >
< br />
< input id ="showModalDialogWithoutArg" type ="button" value ="showModalDialogWithoutArg" onclick ="window.showModalDialog('HTMLPage2.htm');" />
< br />
< input id ="showModalDialogWithArg" type ="button" value ="showModalDialogWithArg" onclick ="window.showModalDialog('HTMLPage2.htm', window);" />
< br />
< input id ="showModelessDialogWithoutArg" type ="button" value ="showModelessDialogWithoutArg" onclick ="window.showModelessDialog('HTMLPage2.htm');" />
< br />
< input id ="showModelessDialogWithArg" type ="button" value ="showModalDialogWithArg" onclick ="window.showModelessDialog('HTMLPage2.htm', window);" />
< br />
< input id ="open" type ="button" value ="open" onclick ="window.open('HTMLPage2.htm');" />
</ form >
</ body >
</ html >
HTMLPage2.htm
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 2nd </ title >
< script language ="javascript" > ...
function InsertToParent()
...{
var slct = window.parent.document.getElementById("Select1");
doc = slct.ownerDocument;
var opt = doc.createElement('OPTION');
opt.value = "2nd 窗口";
opt.text = "2nd 窗口";
slct.options.add(opt);
}
function InsertToOpener()
...{
var slct = window.opener.document.getElementById("Select1");
doc = slct.ownerDocument;
var opt = doc.createElement('OPTION');
opt.value = "2nd 窗口";
opt.text = "2nd 窗口";
slct.options.add(opt);
}
function InsertToTop()
...{
var slct = window.top.document.getElementById("Select1");
doc = slct.ownerDocument;
var opt = doc.createElement('OPTION');
opt.value = "2nd 窗口";
opt.text = "2nd 窗口";
slct.options.add(opt);
}
function InsertByParentFun()
...{
var wnd = window.parent;
wnd.AddOpt("2nd 窗口","2nd 窗口");
}
function InsertByOpenerFun()
...{
var wnd = window.opener;
wnd.AddOpt("2nd 窗口","2nd 窗口");
}
function InsertByTopFun()
...{
var wnd = window.top;
wnd.AddOpt("2nd 窗口","2nd 窗口");
}
function InsertByArgFun()
...{
var wnd = window.dialogArguments;
wnd.AddOpt("2nd 窗口","2nd 窗口");
}
function InsertWithArg()
...{
var wnd = window.dialogArguments;
var doc = wnd.document;
var slct = doc.getElementById("Select1");
doc = slct.ownerDocument;
var opt = doc.createElement('OPTION');
opt.value = "2nd 窗口";
opt.text = "2nd 窗口";
slct.options.add(opt);
}
</ script >
</ head >
< body >
< input id ="InsertToParent" type ="button" value ="InsertToParent" onclick ="InsertToParent()" />
< br />
< input id ="InsertToOpener" type ="button" value ="InsertToOpener" onclick ="InsertToOpener()" />
< br />
< input id ="InsertToTop" type ="button" value ="InsertToTop" onclick ="InsertToTop()" />
< br />
< input id ="InsertByParentFun" type ="button" value ="InsertByParentFun" onclick ="InsertByParentFun()" />
< br />
< input id ="InsertByOpenerFun" type ="button" value ="InsertByOpenerFun" onclick ="InsertByOpenerFun()" />
< br />
< input id ="InsertByTopFun" type ="button" value ="InsertByTopFun" onclick ="InsertByTopFun()" />
< br />
< input id ="InsertByArgFun" type ="button" value ="InsertByArgFun" onclick ="InsertByArgFun()" />
< br />
< input id ="InsertWithArg" type ="button" value ="InsertWithArg" onclick ="InsertWithArg()" />
</ body >
</ html >
showModalDialogWithoutArg | InsertToParent | 不能实现 | 子窗口parent属性为子窗口自身 |
InsertToOpener | 不能实现 | 子窗口opener属性为空 | |
InsertToTop | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByParentFun | 不能实现 | 子窗口parent属性为子窗口自身 | |
InsertByOpenerFun | 不能实现 | 子窗口opener属性为空 | |
InsertByTopFun | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByArgFun | 不能实现 | 没有传送参数给子窗口 | |
InsertWithArg | 不能实现 | 没有传送参数给子窗口 | |
showModalDialogWithArg | InsertToParent | 不能实现 | 子窗口parent属性为子窗口自身 |
InsertToOpener | 不能实现 | 子窗口opener属性为空 | |
InsertToTop | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByParentFun | 不能实现 | 子窗口parent属性为子窗口自身 | |
InsertByOpenerFun | 不能实现 | 子窗口opener属性为空 | |
InsertByTopFun | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByArgFun | 可以实现 |
| |
InsertWithArg | 可以实现 |
| |
showModelessDialogWithoutArg | InsertToParent | 不能实现 | 子窗口parent属性为子窗口自身 |
InsertToOpener | 不能实现 | 子窗口opener属性为空 | |
InsertToTop | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByParentFun | 不能实现 | 子窗口parent属性为子窗口自身 | |
InsertByOpenerFun | 不能实现 | 子窗口opener属性为空 | |
InsertByTopFun | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByArgFun | 不能实现 | 没有传送参数给子窗口 | |
InsertWithArg | 不能实现 | 没有传送参数给子窗口 | |
showModelessDialogWithArg | InsertToParent | 不能实现 | 子窗口parent属性为子窗口自身 |
InsertToOpener | 不能实现 | 子窗口opener属性为空 | |
InsertToTop | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByParentFun | 不能实现 | 子窗口parent属性为子窗口自身 | |
InsertByOpenerFun | 不能实现 | 子窗口opener属性为空 | |
InsertByTopFun | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByArgFun | 可以实现 |
| |
InsertWithArg | 可以实现 |
| |
open | InsertToParent | 不能实现 | 子窗口parent属性为子窗口自身 |
InsertToOpener | 可以实现 |
| |
InsertToTop | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByParentFun | 不能实现 | 子窗口parent属性为子窗口自身 | |
InsertByOpenerFun | 可以实现 |
| |
InsertByTopFun | 不能实现 | 子窗口top属性为子窗口自身 | |
InsertByArgFun | 不能实现 | open方法不能在窗口间传递参数 | |
InsertWithArg | 不能实现 | open方法不能在窗口间传递参数 |