JavaScript之showModalDialog与window.open详解

"本文将介绍两种在Web开发中用于打开新窗口的方法：showModalDialog和window.open。showModalDialog主要用于创建模态对话框，而window.open则用于非模态窗口的打开。这两种方法在不同的场景下有不同的应用和效果。" 在Web开发中，特别是在构建交互式用户界面时，有时需要打开新的窗口或对话框来与用户进行更深入的交互。`showModalDialog`和`window.open`是JavaScript中用于这个目的的两个关键函数，它们分别提供了不同的功能和用户体验。 1. `showModalDialog`(仅IE4+支持) `showModalDialog`方法用来创建一个模态对话框，这意味着用户必须先关闭该对话框才能继续与原页面交互。这在需要用户输入信息或者确认操作的场景下非常有用。例如，我们可以看到以下代码片段： ```javascript function openDialog(strUrl, width, height) { window.showModalDialog(strUrl, window, 'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;center:yes;status:no;scroll:off;'); window.location.href = location.href; return false; } ``` 这里，`strUrl`参数指定对话框要加载的URL，`width`和`height`分别定义了对话框的宽度和高度。`sFeatures`字符串可以设置对话框的其他属性，如居中、禁用状态栏和滚动条等。 2. `window.open`(所有现代浏览器支持) `window.open`方法则用于打开非模态窗口，用户可以同时与新窗口和原页面进行交互。这通常用于打开新标签页或新窗口，例如： ```javascript var newWindow = window.open('http://example.com', 'NewWindow', 'width=800, height=600'); ``` 在这个例子中，`newWindow`引用了新开的窗口，可以用于后续的交互，如关闭窗口或调整其大小。`window.open`的第三个参数`sFeatures`同样可以定义新窗口的特性，如宽度、高度以及是否显示菜单栏等。 3. 参数和返回值 - `showModalDialog`的返回值`vReturnValue`可以用来传递数据回调到调用它的页面。对话框中的代码可以通过`window.dialogArguments`访问传递的参数。 - `window.open`没有返回值，但新窗口的引用可以在`window.open`的返回值中获取，用于进一步操作。 4. 兼容性和使用注意事项 - `showModalDialog`主要为IE浏览器特有，现代浏览器（如Chrome, Firefox）并不支持，因此在跨浏览器开发时需谨慎使用。 - `window.open`在所有主流浏览器中都得到良好支持，是更通用的选项。 总结，`showModalDialog`和`window.open`分别对应模态和非模态的弹窗需求，开发者应根据实际应用场景选择合适的函数。在考虑兼容性和用户体验的同时，适当利用它们能提升网页的交互性。