JS open() 与 showModalDialog() 方法使用介绍

在JavaScript中，通过 open() 与 showModalDialog() 方法可以打开新的浏览器窗口或对话框，提供更好的交互体验。

open() 方法介绍

open() 方法可以在新的浏览器窗口或选项卡中打开一个URL地址。具体语法如下：

window.open(url, name, features);

其中，url为所要打开的URL地址，name为窗口或选项卡的名称，features为配置选项，包括窗口大小、位置、菜单栏、工具栏、状态栏等，具体如下：

配置选项	说明
height	窗口高度
width	窗口宽度
top	窗口距离屏幕顶部的距离
left	窗口距离屏幕左侧的距离
location	是否显示地址栏
menubar	是否显示菜单栏
toolbar	是否显示工具栏
status	是否显示状态栏
resizable	是否可改变窗口大小
scrollbars	是否显示滚动条
fullscreen	是否全屏（IE Edge浏览器中不支持）

例如，以下代码可以打开一个尺寸为800x600，且隐藏菜单栏和工具栏的浏览器窗口：

window.open("http://example.com", "exampleWindow", "height=600,width=800,menubar=no,toolbar=no");

showModalDialog() 方法介绍

showModalDialog() 方法可以在模态对话框中打开一个URL地址，使得用户必须在关闭对话框前完成交互。具体语法如下：

showModalDialog(url, [dialogArguments,] [dialogFeatures]);

其中，url为所要打开的URL地址，dialogArguments为可选参数，用来在对话框窗口中传递参数，dialogFeatures为可选参数，用来指定对话框的尺寸、菜单栏、工具栏、状态栏等。

以下是一个简单的示例，在点击按钮时弹出一个模态对话框：

<button onclick="showDialog()">点击弹出对话框</button>

<script type="text/javascript">
function showDialog() {
    var returnValue = showModalDialog("http://example.com");
    alert("返回值为：" + returnValue);
}
</script>

在上面的代码中，showModalDialog() 方法打开 http://example.com 这个页面，并将结果赋值给 returnValue。当关闭对话框后，将弹出一个警告框，显示返回值。

示例

以下是一个更加复杂的示例，当用户点击按钮时，弹出一个新窗口，然后在新窗口中完成交互后，将结果返回给原窗口并进行后续处理。

<button onclick="openWindow()">点击打开新窗口</button>

<script type="text/javascript">
function openWindow() {
    var newWindow = window.open("http://www.example.com", "exampleWindow", "height=500,width=800");

    // 等待新窗口加载完毕后，向其传递参数并等待返回结果
    newWindow.onload = function () {
        var data = "Hello, World!";
        var returnValue = newWindow.postMessage(data, "*");

        // 处理返回结果
        if (returnValue) {
            alert("返回结果为：" + returnValue);
        } else {
            alert("未返回结果！");
        }
    }

    // 监听message事件，当新窗口调用window.parent.postMessage方法时触发
    window.addEventListener("message", function (e) {
        alert("子窗口返回：" + e.data);
        newWindow.close();
    });
}
</script>

在上面的代码中，当用户点击按钮时，会弹出一个新窗口，加载 http://www.example.com 页面。然后在新窗口加载完毕后，使用 postMessage() 方法向新窗口传递参数。在新窗口完成交互后，若有返回结果，则会在原窗口处理返回结果。这里使用了 addEventListener() 方法监听了在新窗口中调用 parent.postMessage() 方法时的 message 事件。

以上就是关于 open() 和 showModalDialog() 方法的介绍和使用攻略。希望能够帮助到您！