Js 弹出框口并返回值的两种常用方法

在JavaScript中，当需要在新窗口中执行代码并返回结果到当前页面时，通常采用window.showModalDialog()和window.open()这两种方法。以下详细解释这两种方法的用法和特点。 window.showModalDialog()方法用于打开一个模态对话框，并允许从该对话框返回值。这个方法可以创建一个带有自定义样式参数的模式窗口，并在窗口关闭后返回一个值。 方法的参数如下： - url：要加载到模态对话框中的页面地址。 - args：主窗口传给对话框的参数，可以是任意类型，包括数组。 - dialogattrs：一个字符串，指定弹出窗口的样式参数，例如大小、位置、工具栏等。 使用示例： ```javascript var value = window.showModalDialog('test.jsp', strs, 'resizable:yes'); ``` 在弹出窗口中，可以通过设置window.returnValue来返回一个值，返回的值可以通过变量value在父窗口中获取。 这种方法适用于需要显示对话框并返回结果的场景，可以返回简单字符串或数组等类型的数据。然而需要注意的是，showModalDialog()方法在某些浏览器，如IE浏览器中较为常见，但并不是所有浏览器都支持此方法。 接下来是window.open()方法，这是另一种常用的弹出窗口的方式，可以用来打开新窗口或新标签页。这个方法不仅可以用于返回数据，还可以用来创建更复杂的交互式窗口。 使用示例： ```javascript function show_child() { var child = window.open("child.html", "child", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); // 可以通过child窗口中的代码设置返回值，然后在父窗口中获取 } ``` 在子窗口中，可以通过window.opener属性访问到父窗口，并可以操作父窗口中的DOM元素，从而实现数据的返回。 例如，在子窗口中执行以下操作： ```javascript window.close(); window.opener.document.getElementById("txt0").value = document.getElementById("txt").value; ``` 这行代码首先关闭了子窗口，然后通过父窗口的document对象修改了父窗口中某个元素的值。 window.open()方法提供了更多的灵活性，因为它允许开发者自定义窗口的外观和行为，但它也相对复杂一些，需要更细致的控制。 在实际应用中，选择使用哪种方法取决于具体需求。window.showModalDialog()因其简便性在某些简单交互中较为常见，而window.open()则在需要更复杂交互和自定义的场景下更为普遍。一些成熟的CMS系统也倾向于使用window.open()来实现功能。在使用这些方法时，开发者需要考虑浏览器的兼容性问题，以及如何在不同的窗口之间安全地传递数据。