window.open与showModalDialog比较.doc

window.open 与 window.showModalDialog比较发布: 2010-3-19 12:15 | 作者: zzq386866490 | 来源: 青软高宜-青软培训-山东最具实力软件培训机构窗体顶端窗体底端window.open与window.showModalDialog都是用来打开子窗口的。open形式是直接打开一个子窗口,但在ie7以及ie8上都不会直接弹出一个窗口，而是在新标签页中打开，这带来两个问题，一个是操作不方便，另一个是原本明明在open时指定了窗口大小的，但是由于是标签页打开，导致设置的窗口大小完全没用，页面中的内容也是在新窗口中完全打开的，本来设计很好的页面打开后完全变形了。这个时候最好是选用dialog形式打开窗口，使用它打开窗口时有几点需要注意的。1设置窗口的参数： open设置参数一般以逗号分隔; dialog中则是以分号分隔的; window.open()参数： window.open (page.html, newwindow, height=100, width=400, top=0, left=0, toolbar=no, menubar=no,rollbars=no, resizable=no,location=no, status=no) ; 参数说明： window.open 弹出新窗口的命令； page.html 弹出窗口的文件名； newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； window.showModalDialog(sURL,vArguments,sFeatures)参数： window.showModalDialog(page.html,resizable:yes;scroll:yes;status:no;dialogWidth=320px;dialogHeight=230px;center=yes;help=no); 参数说明： sURL -必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 vArguments- 可选参数，类型：变体。用来向对话框传递参数。 传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 sFeatures - 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 1.dialogHeight:对话框高度，不小于100px. 2.dialogWidth: 对话框宽度。 3.dialogLeft:离屏幕左的距离。 4.dialogTop:离屏幕上的距离。 5.center: yesno10：窗口是否居中，默认yes，但仍可以指定高度和宽度。 6.help: yesno10：是否显示帮助按钮，默认yes。 7.resizable:yesno10ie5+：是否可被改变大小。默认no。 8.status: yesno10IE5+：是否显示状态栏。默认为yesModeless或noModal。 9.scroll: yesno10onoff：指明对话框是否显示滚动条。默认为yes。 下面几个属性是用在HTA中的，在一般的网页中一般不使用。 10.dialogHide:yesno10onoff：在打印或者打印预览时对话框是否隐藏。默认为no。 11.edge: sunkenraised：指明对话框的边框样式。默认为raised。 12.unadorned:yesno10onoff：默认为no。2如何访问父窗口中的元素： open 形式打开的子窗口，通过window.opener就可以了，如window.opener.user.value=啦啦啦。 dialog形式打开的子窗口，在写window.showModalDialog时，将window作为该方法的第二个参数，然后在子窗口中通过window.dialogArguments就可以定位到父窗口的window对象。如var bb =window.dialogArguments;bb.document.getElementById(user).value = 啦啦啦。3例子：问题一：我想弹出一个窗口，然后在弹出的窗口里，选择或输入一些信息，要求这些信息返回到父页面。建立父页面：a.htm CODE: 建立子页面：b.htm CODE: 姓名： 年龄： 这里利用了模式窗口window.showModalDialog(),利用window.returnValue = window.showModalDialog(sURL , vArguments , sFeatures)，我们可以打开一个模态窗口，该窗口的优点是限制用户只能对当前的页面进行操作，而对其父页面不能进行操作，常用于向导或者信息获取页面。利用其中的vArguments我们可以在父页面和弹出的页面中进行参数的传递，参数可以为自定义的对象，也可以传递父页面中任何一个控件的引用，这使得我们可以很容易的来操作父页面中的各个元素，使得参数的传递变得非常容易。问题二、第个参数的讨论showModalDialog(子页面地址,向子页面传递参数,子页面外观设置)，主要研究下第个参数。1.第个参数为自定义对象 我们可以定义一个javascript对象，然后定义各种自定义属性的值，然后可以将此对象传递到子页面中。例：将父页面的信息封装成一个对象，然后将该对象传递给子页面。 父页面：oneParent.htm CODE: 父页面向子页面传递自定义对象参数 姓名： 年龄： 子页面：oneSon.htm CODE: 姓名： 年龄： 以上代码中，文档全部加载完,才执行window.onload指定函数，以找到document.forms0.txtName对象，如果去掉，window.onload=function()直接写大括号里的代码，则必须把这个代码块放到之后才能正确运行，否则出现运行时间错误，找不到document.forms0.txtName对象2.第个参数是父页面的一个元素 我们可以将父页面中元素对象的引用传递给子页面，通过该引用我们可以访问父页面中的该元素对象。例：其中利用元素对象的引用我们可以操纵父页面的元素对象的属性。父页面：twoParent.htm CODE: 父页面向子页面传递父页面元素 姓名： 年龄： 子页面：twoSon.htm CODE: 这里注释掉window.onload=function()，直接写大括号里的代码，目的让JS代码先加载，后加载里的元素，否则出现找不到对象infoKeYi的错误。.第个参数是window.如果第个参数是window,这样可以取得父窗口的一些数据和方法。如：/取得父窗口的JS变量 varwindow.dialogArguments.父窗口中的变量;/获得父窗口的对象和属性window.dialogArguments.form1.父窗口中控件name.value ;/调用父窗口的方法 funwindow.dialo