IE父子窗口通信

最新推荐文章于 2022-04-25 17:27:47 发布

38度秋裤

最新推荐文章于 2022-04-25 17:27:47 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/u010452908/article/details/44572689

版权

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <!-- 
     reference: http://qianduanblog.com/post/window-open-parent-child-transport-variable.html
     window.open(URL,windowName,parameters)
     window.showModalDialog (IE好用,其它浏览器不确定) window.showModalDialog(sURL,vArguments,sFeatures);
     传入参数:
     要想对话框传递参数, 是通过vArguments 来进行传递的,类型不限制,对于字符串类型,最大为 4096 个字符,也可以传递对象
     window.showModalDialog(url,window,document)
     
     // 重要知识点:
     window.opener.location.reload(); //子窗口刷新父窗口
     window.opener.location.href //获取父窗口href
     window.opener.location.pathname //获取父窗口路径名称
     
     使用 window.showModalDialog 打开的窗口,可以在打开子窗口的时候将父类的引用通过参数传递过去
     子窗口通过 var parent = window.dialogArguments; 获取父窗口引用
     var parent = window.dialogArguments;
     parent.document.form1.action = 'queryStaff.action';
     parent.document.form1.submit();
     //刷新父页面
     var parent=window.dialogArguments;
     parent.location.reload();
     //从子窗口传值到父窗口
     //要实现在模态子窗口中传值到父窗口,需要使用window.returnValue完成

     var form = parent.document.getElementById("queryFrm");
	 form.submit();
	 
	 // 在子窗口中获取父窗口某个字段的值,文本域etc, 对该值进行操作后返回:
	 var parent = window.dialogArguments;
	 var x = x + 1;
	 // 子窗口返回
	 window.returnValue = x;
	 // 获取来自子窗口的值:
	 var newWin = window.showModalDialog(url, window, '');
	 if (newWin) 
	 document.getElementById("age").value = newWin;
	 
	 window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框
     window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框
     当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它
     
     // IE 开发实例
     
     https://msdn.microsoft.com/en-us/library/ie/ms533723(v=vs.85).aspx
     
     the arguments that were passed when the dialog was created
     The dialogArguments property applies only to windows that are created 
     with the showModalDialog method and the showModelessDialog method
     -->
     <script type="text/javascript">
        function fnLaunch() {
            var aForm;
            // get all elements to given form
            aForm = document.getElementById('oForm').elements;
            var myObject = new Object();
            myObject.firstName = aForm.oFirstName.value;
            myObject.lastName = aForm.oLastName.value;
            // the object 'myobject' is sent to the modal window
            // var retval = window.showModelessDialog(url, varArgIn, options); 
            window.showModalDialog('modalDialogSource.jsp', myObject, "dialogHeight:300px; dialogLeft:200px;")
        }
     </script>
  </head>
  
  <body>
    <!-- reference:[https://msdn.microsoft.com/en-us/library/ie/ms533723(v=vs.85).aspx] -->
    <!-- %this file launches the modal window and then sends an object to that modal window -->
    <!-- %The modal window launched from this sample uses the dialogArguments property to 
          retrieve information from the parent document -->
    <button οnclick="fnLaunch();">Launch the dialog</button>
    <form action="" id="oForm">
	    First Name:
	    <input type="text" name="oFirstName" value="Jane">
	    <br>
	    Last Name:
	    <input type="text" name="oLastName" value="Smith">
    </form>
  </body>
</html>

<!--<html>
  <head>
    <base href="<%=basePath%>">
    <script>
	    var oMyObject = window.dialogArguments;
	    var sFirstName = oMyObject.firstName;
	    var sLastName = oMyObject.lastName;
    </script>
  </head>
  
<body style="font-family: arial; font-size: 14pt; color: Snow; background-color: RosyBrown;">
  First Name:
  <span style="color: 00ff7f">
    <script>
      document.write(sFirstName);
    </script>
  </span>
  <br>
  Last Name:
  <span style="color: 00ff7f">
    <script>
      document.write(sLastName);
    </script>
  </span>
</body>
</html>-->

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<!--
	The best guide is reading W3 original source:
	reference: http://www.w3schools.com/jsref/coll_form_elements.asp [文档对象模型]
	<link rel="stylesheet" type="text/css" href="styles.css">
	
	// attention return <[ELEMENT]>
	document.forms.elements [文档中所有表格元素对象]
	docuemnt.getElementById('').elements [文档中指定表格元素对象]
	
	Syntax
	formObject.elements
	Properties
	Property Description 
	length Returns the number of elements in the <form> element.
	Note: This property is read-only 
	
	Methods
	Method Description 
	[index] Returns the element in <form> with the specified index (starts at 0).
	
	Note: Returns null if the index number is out of range 
	item(index) Returns the element in <form> with the specified index (starts at 0).
	
	Note: Returns null if the index number is out of range 
	namedItem(id) Returns the element in <form> with the specified id.
	Note: Returns null if the id does not exist 
	
	Technical Details
	DOM Version: Core Level 2 Document Object 
	Return Value: An HTMLFormsControlCollection Object, representing all elements in a <form> element. 
	The elements in the collection are sorted as they appear in the source code 
	-->
  <script type="text/javascript">
   function checkElement()
   {
     var len = document.getElementById('staffName').elements.length;
     var var1 = document.getElementById('staffName').elements[0].value;
     var var2 = document.getElementById('staffName').elements.item(1).name;
     var var3 = document.getElementById('staffName').elements.namedItem('btn').tagName; 
     alert(len + " : " + var1 + " : " + var2 + " : " + var3);
   }
   function submitForm()
   {
      //document.getElementById('staffName').submit();
      //var form = document.getElementById('staffName');
      //form.submit();
      document.getElementById('salaryLevel').action = 'aaaa.action';
      document.getElementById('salaryLevel').submit();
   }
  </script>
  </head>
  
  <body>
    <form action="getstaff.action" id="staffName">
	  firstName：<input type="text" id="firstName" name="firstName">
	  lastName:<input type="text" id="lastName" name="lastName">
	  <button id="btn" name="btn" οnclick="checkElement();">check_out_number</button>
	  <button id="btn2" name="btn2" οnclick="submitForm();">submitForm</button>
    </form>
    <form action="getsalary.action" id="salaryLevel">
    </form>
    <form action="geteducation.action" id="eduDegree">
    </form>
  </body>
</html>