javaScript--showModalDialog 和 open

最新推荐文章于 2021-06-23 23:15:22 发布

沸羊羊一个

最新推荐文章于 2021-06-23 23:15:22 发布

阅读量1.2k

点赞数

分类专栏： ajax+html+css+js

本文链接：https://blog.csdn.net/zhixinhuacom/article/details/17227337

版权

ajax+html+css+js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需求：在a.html页面点击按钮跳转到b.html页面，在b页面输入数据后，数据传回a页面

效果：

方案一：（showModalDialog）

a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加客户</title>
</head>
<script type="text/javascript">
  function openWin()
  {
      /*
      sURL  　 必选项。字符串(String)。指定要载入和显示的 URL 。
      vArguments  　 可选项。指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。对话框可以通过调用程序从 window         对象的 dialogArguments 属性提取这些值。  
      sFeatures  　 可选项。字符串(String)。指定对话框的窗口装饰。使用下面的值。多个之间用分号隔开。

      */
      var vReturnValue = window . showModalDialog ("b.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes")
      
  }
 
  function setValue(id,name)
  {
      document.getElementById("id").value=id;
      document.getElementById("name").value=name;
  }
</script>
<body>
 <form name="form">
   客 户id:<input id="id" type="text"/>   <br />
   客户名称:<input id="name" type="text"/>   <br />
           <input type="button" value="选择客户" id="select" οnclick="openWin()"/>
 </form>
</body>
</html>

b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户信息</title>
</head>
<script type="text/javascript">
   function viewData(id,name)
   {
       var adata=window.dialogArguments;
       //方法一 调用a.html的函数
       adata.setValue(id,name);
       //方法二
       /*
       adata.document.getElementById("id").value=id;
       adata.document.getElementById("name").value=name;
       */
       window.close();
   }
</script>
<body>
<table border="1">
  <tr>
    <td>客户ID</td>
    <td>客户名称<td>
     <td>操作<td>
  </tr>
   <tr>
    <td>001</td>
    <td>深圳华为<td>
     <td><input type="button" id="but1" value="选择" οnclick="viewData('001','深圳华为')"/><td>
  </tr>
   <tr>
   <td>002</td>
   <td>用友软件<td>
   <td><input type="button" id="but1" value="选择" οnclick="viewData('002','用友软件')"/><td>
  </tr>
</table>
</body>
</html>

方案二（open）

window . open的使用参考

语法：

oNewWindow = window . open ( sURL , sName , sFeatures , bReplace )

参数：

sUrl

可选项。字符串(String)。指定要被加载的HTML文档的 URL 地址。假如无指定值，则 about:blank的新窗口会被显示。

sName

可选项。字符串(String)。指定打开的窗口的名字。这个名字可以用于 form或 a对象的TARGET属性。此名字也可以使用下列通用名称:

_media	:	IE6.0	在浏览器左边的媒体面板内打开 sUrl 。
_blank	:		在新窗口中打开 sUrl 。
_parent	:		在当前框架的父框架内打开。假如当前框架无父框架，此参数值等同于 _self 。
_search	:	IE5.0	在浏览器左边的搜索面板内打开 sUrl 。
_self	:		sUrl 在当前窗口中打开，覆盖当前文档。
_top	:		在所有框架之外的最顶层窗口中打开 sUrl 。假如当前窗口无框架结构，此参数值等同于 _self 。

sFeatures

可选项。字符串(String)。指定窗口装饰样式。使用下面的值。多个之间用逗号隔开。只有当新的浏览器窗口被建立时，此参数的设置才会发生作用。

channelmode = { yes \| no \| 1 \| 0 }		指定是否将窗口显示为频道模式。默认值为 no 。
directories = { yes \| no \| 1 \| 0 }		指定是否显示「链接」按钮。默认值为 yes 。
fullscreen = { yes \| no \| 1 \| 0 }		指定是否以全屏方式显示窗口。默认值为 no 。要小心使用全屏模式，因为这种模式会隐藏浏览器窗口的标题栏和菜单。如果没有在页面内提供关闭窗口的功能，用户可以使用 ALT+F4 快捷键关闭窗口。
height = number		设置窗口的高度。最小值为 100 。
left = number		设置窗口左上角相对于桌面的横坐标。单位为像素( px )。
width = number		设置窗口的宽度。最小值为 100 。
top = number		设置窗口左上角相对于桌面的纵坐标。单位为像素( px )。
location = { yes \| no \| 1 \| 0 }		设置是否显示浏览器窗口的地址栏。默认值为 yes 。
menubar = { yes \| no \| 1 \| 0 }		设置是否显示浏览器窗口的菜单栏。默认值为 yes 。
resizable = { yes \| no \| 1 \| 0 }		设置窗口是否允许被用户改变尺寸。默认值为 yes 。
scrollbars = { yes \| no \| 1 \| 0 }		设置窗口是否可以具有滚动条。默认值为 yes 。
status = { yes \| no \| 1 \| 0 }		设置是否显示浏览器窗口的状态栏。默认值为 yes 。
titlebar = { yes \| no \| 1 \| 0 }		设置是否显示浏览器窗口的标题栏。除非调用程序是HTML应用程式( HTA )或被信任的对话框，否则此参数将被忽略。默认值为 yes。
toolbar = { yes \| no \| 1 \| 0 }		设置是否显示浏览器窗口的工具条。默认值为 yes 。

bReplace

可选项。布尔值(Boolean)。false | true

false	:	新打开的文档覆盖历史列表里的当前文档。
true	:	文新打开的文档被简单的添加到历史列表的最后

a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加客户</title>
</head>
<script type="text/javascript">
  function openWin()
  {
     window.open("b.html","_blank",'height=200,width=400,status=yes,toolbar=no,menubar=no,location=no');
      
  }
  //把返回的值显示在input中
  function setValue(id,name)
  {
      document.getElementById("id").value=id;
      document.getElementById("name").value=name;
  }
</script>
<body>
 <form name="form">
   客 户id:<input id="id" type="text"/>   <br />
   客户名称:<input id="name" type="text"/>   <br />
           <input type="button" value="选择客户" id="select" οnclick="openWin()"/>
 </form>
</body>
</html>

b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户信息</title>
</head>
<script type="text/javascript">
   function viewData(id,name)
   {
     
       //返回时创建当前窗口的那个窗口的引用（这里指a.html）
       var adata = window.opener;
        adata.setValue(id,name);
       window.close();
   }
</script>
<body>
<table border="1">
  <tr>
    <td>客户ID</td>
    <td>客户名称<td>
     <td>操作<td>
  </tr>
   <tr>
    <td>001</td>
    <td>深圳华为<td>
     <td><input type="button" id="but1" value="选择" οnclick="viewData('001','深圳华为')"/><td>
  </tr>
   <tr>
   <td>002</td>
   <td>用友软件<td>
   <td><input type="button" id="but1" value="选择" οnclick="viewData('002','用友软件')"/><td>
  </tr>
</table>
</body>
</html>

二、打开窗口，返回数据到父窗口（不同浏览器的打开方式不一样，以下是兼容多种浏览器的打开方式）

showModalDialog 和 open

父窗口打开：

/*
			* 打开修改/新增明细窗口
			*itemNumber 序号
			*index 表格的行
			*/
			function openPresciptDetail(itemNumber){
				var url="<%=basePath%>/system/PrescriptionManage!toPresciptDetailEditOrAdd.action?typeCode="+templateType+"&templateNo="+tempateNo+"&templateName="+templateName+"&itemNumber="+itemNumber+"&preItemNumber="+preItemNumber;
				var width=770;
				var height=650;
				var left=(window.screen.availWidth-10-width)/2; //获得窗口的垂直位置;
				var top=(window.screen.availHeight-30-height)/2;//获得窗口的水平位置;
				if(window.showModalDialog){
					showModalDialog(url, window, "dialogLeft:"+left+"px;dialogTop:"+top+";dialogWidth:"+ width +"px;dialogHeight:"+ height +"px;status:0;scroll:0;help:0;" );
				}else{
					window.open(url, "","top="+top+",left="+left+",height="+height+"px,width="+width+"px,scrollbars=no,resizable=yes,scroll=no" );
				}
				return false
			}

父窗口接受返回值:

//param:修改后的明细对象   
function returnValue(param){
			  
}

子窗口调用父窗口实现数据返回:

 if(window.opener) { //open 打开
	window.opener.returnValue(msg);
}else{ //showModalDialog 打开
	window.dialogArguments.returnValue(msg);
 }

三、父页面传递长度比较大的参数，或者传递对象到子页面。则才用子页面直接访问父页面对象的方式(子页面返回参数也可直接操作父页面属性或方法)

父页面：

var selSaveOfTemplateData = [];//存储给子页面的变量
var hashSelSaveOfTemplate = [];//接受子页面返回值得变量


function openChild(){

	selSaveOfTemplateData = [];//清空变量
	hashSelSaveOfTemplate = [];//清空变量
	var url = baseUrl +"/page/test/selSaveOfTemplate.jsp?random="+Math.random();
	var width=550;
	var height=450;
	var left=(window.screen.availWidth-10-width)/2; //获得窗口的垂直位置;
	var top=(window.screen.availHeight-30-height)/2;//获得窗口的水平位置;
	if(window.showModalDialog){
		window.showModalDialog(url, window, "dialogLeft:"+left+"px;dialogTop:"+top+";dialogWidth:"+ width +"px;dialogHeight:"+ height +"px;status:0;scroll:0;help:0;" );
	}else{
		window.open(url, "","top="+top+",left="+left+",height="+height+"px,width="+width+"px,menubar=no,location=no,scrollbars=no,resizable=yes,scroll=no" );
	}
}
		
//给子页面获取变量提供方法
function getaveOfTemplateData(){
	return selSaveOfTemplateData;
}

子页面：

var medicineData = [];
$(function () {
     //接受父页面的参数
      if(window.opener) { //open 打开  
		   medicineData = window.opener.getaveOfTemplateData();  
		}else{ //showModalDialog 打开  
		   medicineData = window.dialogArguments.getaveOfTemplateData();  
	  }  
	//加载主表信息
	buildMain();
});

//关闭窗口时，传值回父页面(直接操作父页面的全局变量)
function selMedicine(){
	//返回结果
	if(window.opener) { //open 打开  
		window.opener.hashSelSaveOfTemplate.push(medicine); 
        }else{ //showModalDialog 打开  
		window.dialogArguments.hashSelSaveOfTemplate.push(medicine); 
        }  
	window.close();
}

注意：不要在子页面声明对象，给页面对象变量赋值。如：

function selMedicine(){
	var  medicines = [];
	if(window.opener) { //open 打开  
		window.opener.hashSelSaveOfTemplate = medicines;
        }else{ //showModalDialog 打开  
		window.dialogArguments.hashSelSaveOfTemplate=medicines ;
        }  
	window.close();
}

这样当子页面关闭后会引起：不能执行已释放 Script 的代码脚本报错

 原因：页面之间传递对象的时候，子页面new的对象（所有对象，除了字符串）会在子页面关闭时释放，所有在父页面对这个对象的引用（注意是“引用”，就算你将该对象赋值给父页面的对象，还是对它的引用）操作都将产生这个js错误。

沸羊羊一个

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript--showModalDialog 和 open

需求：在a.html页面点击按钮跳转到b.html页面，在b页面输入数据后，数据传回a页面效果：方案一：（showModalDialog）a.html 添加客户 function openWin() { /* sURL 　必选项。字符串(String)。指定要载入和显示的 URL 。
复制链接

扫一扫