JS点击按钮弹出新页面选值并返回当前页

简介：
本教程详细介绍了如何使用JavaScript编写代码，实现用户在网页中通过点击按钮来打开一个新窗口进行选择操作，并将结果反馈到原页面的功能。适合前端开发人员学习参考。 在Web开发过程中经常需要实现从当前页面跳转到另一个页面，并且用户完成某些操作后将结果反馈给原页面的功能。本段落档讨论的是使用JavaScript来实现在点击按钮弹出一个新窗口，然后由该窗口返回选择信息并将其显示回原始网页的技术。这种技术常见于内容管理系统（CMS）中用于执行相关文章搜索或在已上传目录中选取图片等操作。 具体实现步骤如下： 1. 使用`window.showModalDialog()`方法来展示模态对话框页面。 2. 在弹出的模态窗口内，用户完成选择后会使用JavaScript中的`window.returnValue`属性将所选值传递回调用该模态窗口的原始网页。 3. 原始网页则利用获取到的`window.showModalDialog()`返回的结果来接收从新页面发送过来的数据。 4. 利用HTML隐藏域（如）保存由弹出页面传回来的信息。 具体技术解析： - `window.showModalDialog()`: 这是Internet Explorer浏览器提供的一个方法，用于打开模态对话框并允许返回数据到调用它的网页。此函数的第一个参数为要加载的URL地址；第二个参数通常设置为主窗口（即`window`）；第三个可选参数是一个字符串，用来定义对话框的位置、大小等特性。该方法执行完毕后会将用户通过`window.returnValue`设定的值返回给原始页面。 - `window.returnValue`: 当运用了`window.showModalDialog()`函数时，在新打开的网页中可以利用`window.returnValue`属性来设置一个要传递回原窗口的数据，这是实现数据在两个页面间交换的关键技术手段之一。 - HTML中的标签：这是一种ASP.NET Web表单控件，用于存储不可见的信息。当模态对话框需要向主网页传输数据时可以直接修改隐藏字段的值；而原始网页则通过读取这些隐藏域内的信息来接收新页面传递过来的数据。 - JavaScript中的`window.close()`: 在弹出窗口中可以通过调用该方法关闭当前活动的窗口。 上述步骤结合具体的代码示例，可以展示在CMS系统内如何利用以上技术实现一个完整功能。例如，在主网页上点击按钮会触发函数来打开模态对话框；用户通过某种方式（如单击链接）设置`window.returnValue`属性值之后，当关闭该弹出窗口时原始页面将获取到这个返回的数据并进行相应的操作。 值得注意的是，由于`window.showModalDialog()`方法仅限于Internet Explorer支持，在其他浏览器中需要寻找替代方案以确保跨平台兼容性。例如可以考虑使用Window.open()结合window.opener来实现类似的功能。同时根据具体的CMS系统及开发环境可能还需要对示例代码进行调整和优化才能满足特定需求的实现要求。