JS的window.showModalDialog及window.open用法实例分析

在网页开发中，我们经常需要弹出新的窗口来进行交互或展示信息。其中，window.showModalDialog() 和 window.open() 方法可以用来实现窗口的打开功能。这篇文章将分析这两个方法的使用方法以及给出相应的实例。

window.showModalDialog

window.showModalDialog() 方法可以用来打开一个对话框窗口，该窗口会锁定父窗口，直到对话框被关闭才能继续操作。

语法

window.showModalDialog(url, name, features)

参数说明

url: 要打开的对话框窗口的URL。
name(可选): 窗口名称。
features(可选): 一个由逗号分隔的选项列表。

示例一

下面是一个使用 window.showModalDialog() 方法的实例。

<input type="button" value="打开对话框" onclick="openDialog()">

<script>
function openDialog() {
  var url = "dialog.html";
  var name = "";
  var features = "height=200,width=400,modal=yes";
  var returnValue = window.showModalDialog(url, name, features);
  alert("返回值为：" + returnValue);
}
</script>

在上面的示例中，当用户单击“打开对话框”按钮时，会打开一个对话框窗口，该窗口的URL为“dialog.html”，窗口名称为空字符串，选项列表为指定的高度、宽度和模式。当对话框窗口被关闭时，会将消息框弹出并显示“返回值为：XXX”。

示例二

下面是另一个使用 window.showModalDialog() 方法的实例。

<html>
<body>
  <input type="button" value="打开对话框" onclick="openDialog()">

<script>
function openDialog() {
  var url = "dialog.html";
  var name = "";
  var features = "height=200,width=400,modal=yes";
  var returnValue = window.showModalDialog(url, name, features);
  if (returnValue != null) {
    alert("返回值为：" + returnValue);
  }
}
</script>

</body>
</html>

在上面的示例中，当用户单击“打开对话框”按钮时，会打开一个对话框窗口，该窗口的URL为“dialog.html”，窗口名称为空字符串，选项列表为指定的高度、宽度和模式。如果对话框窗口关闭时返回值不为空，则会将消息框弹出并显示“返回值为：XXX”。

window.open

window.open() 方法可以用来打开一个新的窗口或标签页。

语法

window.open(url, name, features)

参数说明

url: 要打开的窗口的URL。
name(可选): 窗口名称。
features(可选): 一个由逗号分隔的选项列表。

示例一

下面是一个使用 window.open() 方法在新窗口中打开链接的示例。

<input type="button" value="打开百度" onclick="openBaidu()">

<script>
function openBaidu() {
  var url = "https://www.baidu.com";
  var name = "_blank";
  var features = "";
  window.open(url, name, features);
}
</script>

当用户单击“打开百度”按钮时，会在一个新的窗口中打开百度搜索页面。

示例二

下面是一个使用 window.open() 方法在新标签页中打开链接的示例。

<input type="button" value="打开百度" onclick="openBaidu()">

<script>
function openBaidu() {
  var url = "https://www.baidu.com";
  var name = "_blank";
  var features = "";
  window.open(url, name, features);
}
</script>

当用户单击“打开百度”按钮时，会在一个新的标签页中打开百度搜索页面。