寻技术

JS中window.showModalDialog()详解 HTML DOM open() 方法

寻技术 Html/CSS / JS脚本 2023年07月11日 147

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 
使用方法：

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 
参数说明： 
sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 
vArguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 
sFeatures-- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 
1.dialogHeight :对话框高度，不小于100px，IE4中dialogHeight 和 dialogWidth 默认的单位是em，而IE5以上是px，为方便其见，在定义modal方式的对话框时，用px做单位。 
2.dialogWidth: 对话框宽度。 
3.dialogLeft: 离屏幕左的距离。 
4.dialogTop: 离屏幕上的距离。 
5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。 
6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。 
7.resizable: {yes | no | 1 | 0 } 〔IE5＋〕：是否可被改变大小。默认no。 
8.status: {yes | no | 1 | 0 } 〔IE5+〕：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 
9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。 
下面几个属性是用在HTA中的，在一般的网页中一般不使用。 
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。 
11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。 
12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。 
参数传递： 
1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如： 
------------------------------- 
parent.htm

<script> 
var obj = new Object(); 
obj.name="i5tt"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script>

modal.htm 
<script> 
var obj = window.dialogArguments 
alert("您传递的参数为：" + obj.name) 
</script> 
------------------------------- 
2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如： 
------------------------------ 
parent.htm

<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script>

modal.htm 
<script> 
window.returnValue="http://www.i5tt.com/"; 
</script>

将参数传递与返回结果结合在一起的实例

ParentPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="JavaScript" type="text/javascript">

        function openwindow() {
            var obj = new Object();
            obj.value = "3";
            obj.name = "4";
            obj.sew = "5";
            str =window.showModalDialog("ChildPage.aspx",obj,"dialogWidth=200px;dialogHeight=100px");
            alert(str);

        }

        function openModelessDialog() {
            var obj = new Object();
            obj.value = "3";
            obj.name = "4";
            obj.sew = "5";
            str = window.showModelessDialog("ChildPage.aspx", obj, "dialogWidth=200px;dialogHeight=100px");
            alert(str);

        }
    </script>
</head>
<body>
    <form />
    </div>
    </form>
</body>
</html>

ChildPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function getArguments() {
            var obj = window.dialogArguments
            alert("您传递的参数为：" + obj.value)
        }

 

 

        function windowclose() {
            window.returnValue = "childPage.Close";
        }
    </script>
</head>
<body onunload="windowclose();">
    <form onclick='self.close(); ' />

    </div>
    </form>
</body>
</html>

 

 

 

 

 

 

open函数语法

window.open(url, name, features, replace);

open函数参数说明

  • url -- 要载入窗体的URL
  • name -- 新建窗体的名称(也可以是HTML target属性的取值，目标)
  • features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔
  • replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定

open函数name参数说明

name用于设置弹出窗体的名称，如果使用已有的窗体或框架名称作为name参数，那么url网址将在这个窗体或框架页面载入

例如：

<a href="http://www.dreamdu.com/" target="dreamdu">使用HTML连接建立一个页面</a>
<a href="#" onclick="window.open('http://www.dreamdu.com/xhtml/','dreamdu');">使用JavaScript在上面已经建立连接的页面载入HTML教程</a>

首先使用普通HTML链接打开一个页面(target名为dreamdu)，之后使用open函数打开另一个页面，浏览器首先要查找是否有名称为dreamdu的窗体，如果有，就在这个窗体中加载梦之都HTML教程网址。否则新建一个名称为dreamdu的窗体并加载梦之都HTML教程网址

open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开

open函数features参数说明

如果不使用第三个参数，将打开一个新的普通窗口

open函数features参数说明，通过特性字符串可以定义新的特性的窗口
参数名称 类型 说明
height Number 设置窗体的高度，不能小于100
left Number 说明创建窗体的左坐标，不能为负值
location Boolean 窗体是否显示地址栏，默认值为no
resizable Boolean 窗体是否允许通过拖动边线调整大小，默认值为no
scrollable Boolean 窗体中内部超出窗口可视范围时是否允许拖动，默认值为no
toolbar Boolean 窗体是否显示工具栏，默认值为no
top Number 说明创建窗体的上坐标，不能为负值
status Boolean 窗体是否显示状态栏，默认值为no
width Number 创建窗体的宽度，不能小于100

特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格

open函数返回值

新建立的window对象

猴子提示: 不建议使用弹出窗体，HTML弹出窗体

示例

window.open("http://www.dreamdu.com/", "dreamduwin", "width=500,height=300,left=10,top=20,location=yes,status=yes");

新建一个宽度为500像素，高度为300像素，距离屏幕左上角水平偏移10像素，垂直偏移20像素，有地址栏与状态栏的窗体

var oWin=window.open("http://www.dreamdu.com/", "dreamduwin");
oWin.resizeTo(800,600);        //重新设置窗体大小
oWin.moveTo(50,50);        //移动窗体
oWin.close();                //关闭窗体

window.open函数新建立窗体后会返回新建窗体的window对象，通过此对象可以控制窗体（移动，改变大小，关闭）

<input type="button" value="在新窗口中打开梦之都！" onclick="window.open('http://www.dreamdu.com/', 'dreamduwin', 'width=500,height=300,left=10,top=20,location=yes,status=yes');" />

JavaScript opener数示例

 

<script type="text/javascript">
function f4(){
	open("ab.html","_blank","width=500,height=300,");
}
</script>
<input type="button" value="f6" onclick="f6()">
<div ></div>

　　

<script type="text/javascript">
function f10(){
		opener.f5();

	}
function f9(){
			opener.document.getElementById("ddv").innerHTML="gaile";

	}
</script>
<input type="button" value="gai" onclick="f9()">
<input type="button" value="gai" onclick="f10()">

　　

版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
相关推荐
关闭

用微信“扫一扫”