javascript基础：window对象内置对话框、模式和非模式对话框、传值方法

最新推荐文章于 2023-07-13 16:58:02 发布

LongRui888

最新推荐文章于 2023-07-13 16:58:02 发布

阅读量739

点赞数

分类专栏：【Javascript与jQuery】

本文链接：https://blog.csdn.net/sqlserverdiscovery/article/details/54845564

版权

【Javascript与jQuery】专栏收录该内容

32 篇文章 0 订阅

订阅专栏

window对象中有多个内置的对话框函数，包括模式对话框showModalDialog、非模式对话框showModeless、警告对话框、确认对话框、格式对话框。

模式对话框就是对话框弹出后，不能操作父对话框，关闭之后才可以继续操作父对话框。

而非模式对话框在弹出之后，可以继续操作父对话框。

另外，代码中还包含了用子对话框中的数据，修改父对话框中的数据。

下面的代码只支持在ie浏览器运行，不支持在谷歌的chrome浏览器，因为chrome浏览器现在已经不支持不支持模式、非模式对话框了。

由此想到，在前端开发中，最好不要直接调用对话框函数，而是进行一个封装，这样在浏览器不支持这些函数，或者在解决浏览器兼容性问题时，直接替换封装函数内部的这些函数，而不是去代码中一个一个的改，省时省力。

说句题外话，谷歌在浏览器的设计上，根本不会考虑你的感受，实力决定一切。

父窗口代码：

<!DOCTYPE HTML >
<HTML>
 <HEAD>
	<meta charset="gb2312">
	<script language="javascript">
		
		var sUsername = "";

		function updateUsername()
		{
			if(sUsername == "")
				sUsername = '小咪';
			
			showName.innerHTML = "<font color='red'>"+sUsername+"</font>";
		}

		function showDialog(f)
		{
			var sFeatures = "dialogWidth:800px;dialogHeight:560px;status:off;help:no";
            
			switch(f)
			{
			case 1:
				//第2个参数传入了window对象
				window.showModalDialog("js window对象：非模式-模式窗口.html",window,sFeatures);
				break;
			case 2:
				window.showModelessDialog("js window对象：非模式-模式窗口.html",window,sFeatures);
				break;
			case 3:
				alert("alert对话框！");
				break;
			case 4:
				var r;
				r = confirm("请确认！");
				break;
			default:
				var rr;
				rr = prompt("请输入用户名：","123");  //第2个参数为默认值
				inputValue.innerText = rr;            //设置了id才能这么直接赋值
			}
		}

	</script>

 </HEAD>

 <BODY οnlοad="updateUsername();">
	<h1>window对象的对话框</h1>
	<hr>
	用户名：<span id="showName"></span>
	<br>
	<hr>
	输入密码：<span id="inputValue"></span>
	<form>
		<input type="button" value="模式对话框" οnclick="showDialog(1);">
		<input type="button" value="非模式对话框" οnclick="showDialog(2);">
		<input type="button" value="警告对话框" οnclick="showDialog(3);">
		<input type="button" value="确认对话框" οnclick="showDialog(4);">
		<input type="button" value="提示对话框" οnclick="showDialog(5);">
	</form>
 </BODY>
</HTML>

子窗口：

<!DOCTYPE HTML>
<HTML>
 <HEAD>
    <meta charset="gb2312">
	<script language="javascript">
		
		//通过dialogArguments属性，获取传入的调用者的window对象.
		//修改调用者window对象中的变量和函数
		function sendUsername()
		{
			//window对象的dialogArguments属性获取调用者传入的参数
			var callWin = window.dialogArguments;
			
			//通过设置name属性，可以用下面的方式引用值
			callWin.sUsername = document.Data.username.value; 
			callWin.updateUsername();
		}

	</script>
 </HEAD>

 <BODY>
 <form name="Data">
	 用户名：<input type="text" name="username"><br>
	 <input type="button" value="应用" οnclick="sendUsername();">
	 <input type="button" value="确定" οnclick="sendUsername();window.close();">
	 <input type="button" value="取消" οnclick="window.close();"> 
 </form>
  
 </BODY>
</HTML>

LongRui888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础：window对象内置对话框、模式和非模式对话框、传值方法

window对象中有多个内置的对话框函数，包括模式对话框showModalDialog、非模式对话框showModeless、警告对话框、确认对话框、格式对话框。模式对话框就是对话框弹出后，不能操作父对话框，之后关闭之后才可以继续操作父对话框。而非模式对话框在弹出之后，可以继续操作父对话框。另外，代码中还包含了用子对话框中的数据，修改父对话框中的数据。下面的代码只支持在ie浏览器运
复制链接

扫一扫