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>
当用户单击“打开百度”按钮时，会在一个新的标签页中打开百度搜索页面。
总结
本篇文章介绍了 JS 的 window.showModalDialog() 和 window.open() 方法的用法，并给出了相应的实例进行了演示。这两个方法可以在网页开发中用来实现窗口的打开功能，开发者可以根据自身的需求进行选择使用。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js的window.showModalDialog及window.open用法实例分析 - Python技术站
微信扫一扫 
支付宝扫一扫 