`

利用dialogArguments进行网页页面传值

    博客分类:
  • JS
阅读更多
dialogArguments只能在mode和modeless窗口中才能使用,可以传递传递任意类型的值,
上例就是传得失window. 在以前的项目中,页面之间传递参数经常使用的是url后接参数的形式,
现在终于发现dialogArguments不愧为更好的方法。

<HTML>
<HEAD>
<TITLE>showModelessDialogEX.htm</TITLE>
<SCRIPT>
var sUserName="";

function fnCallDialog(){
 showModelessDialog("myDialog.htm",window,"status:false;dialogWidth:300px;dialogHeight:300px");
}

function fnUpdate(){
    oName.innerText = sUserName;
}
</SCRIPT>
</HEAD><BODY>
<P>Enter your first name:
 <SPAN ID="oName" STYLE="color:red;font-size:24">Joan</SPAN></P>
 <INPUT TYPE="button" 
VALUE="Display Modeless Dialog" onclick="fnCallDialog()">
</BODY>
</HTML>

Here is the code for "myDialog.htm".
<HTML>
<HEAD>
<TITLE>myDialog.htm</TITLE>
<SCRIPT>
function fnGetInfo() {
var sData = dialogArguments;
sData.sUserName = oEnterName.value;
sData.fnUpdate();
}
function fnCancel() {
var sData = dialogArguments;
sData.sUserName = "Joan";
sData.fnUpdate();
}
</SCRIPT>
</HEAD>
<BODY>
<LABEL FOR="oEnterName" ACCESSKEY="f">
Enter your <SPAN STYLE="text-decoration:underline">F</SPAN>irst Name</LABEL>
<INPUT ID=oEnterName><BR><BR>
<INPUT VALUE="Apply" TYPE=button onclick="fnGetInfo();">
<INPUT VALUE="Ok" TYPE=button onclick="fnGetInfo();window.close();">
<INPUT VALUE="Cancel" TYPE=button onclick="fnCancel();window.close();">
</BODY>
</HTML>

-------------------------------------------------------------

此处,执行到 sData.fnUpdate();总是报错,说对象不支持此属性和方法。

下面这个也是一样:
js页面传值
子页面
点击确定执行js方法
function save()
{

var elementid=document.getElementById("elementid").value;
var elementname= document.getElementById("elementname").value);
// 把返回的值添加到父页面
   var windowObj = dialogArguments;
    windowObj.elementID    = elementid;
    windowObj.elementName  = elementname;
    windowObj.initElement();
    window.close();
}
父页面
js:
打开子页面
open()
{
window.showModalDialog(url);
}
得到数据
function initElement()
   {
       var name = elementName;
       var id = elementID;
  }



------------------------------------------------------------




js 页面传值

关键字: js
Html代码 复制代码

   1.  
   2. <!--将弹出来的子窗口的值传给父窗体  
   3. 父窗口  
   4.  
   5. --> 
   6.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
   7. <HTML>  
   8.  <HEAD>  
   9.   <TITLE> New Document </TITLE>  
  10.      
  11.     <script type="text/javascript">  
  12.            
  13.         function openWindow() {   
  14.             var result  = window.showModalDialog("childen.html","DialogHeigth=40,DialogWidth:100px,location:no,menubar:no,toolbar:no,status:no");   
  15.                
  16.             if(result)   
  17.                 document.getElementsByName("content")[0].value=result;   
  18.         }   
  19.   
  20.     </script>  
  21.   
  22.  </HEAD>  
  23.   
  24.  <BODY>  
  25.     <input type="button" value="打开新窗口" onclick="openWindow()">  
  26.     <hr>  
  27.     这是父窗口<br>  
  28.     <input type="text" name="content" >  
  29.  </BODY>  
  30. </HTML>  

<!--将弹出来的子窗口的值传给父窗体
父窗口

-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  
	<script type="text/javascript">
		
		function openWindow() {
			var result  = window.showModalDialog("childen.html","DialogHeigth=40,DialogWidth:100px,location:no,menubar:no,toolbar:no,status:no");
			
			if(result)
				document.getElementsByName("content")[0].value=result;
		}

	</script>

 </HEAD>

 <BODY>
	<input type="button" value="打开新窗口" onclick="openWindow()">
	<hr>
	这是父窗口<br>
	<input type="text" name="content" >
 </BODY>
</HTML>



Html代码 复制代码

   1.  
   2.  
   3. <!--子窗口 --> 
   4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
   5. <HTML>  
   6.  <HEAD>  
   7.   <TITLE> New Document </TITLE>  
   8.      
   9.     <script type="text/javascript">  
  10.         function execute() {   
  11.             window.returnValue = document.getElementsByName("content")[0].value;   
  12.             window.close();   
  13.         }   
  14.     </script>  
  15.  </HEAD>  
  16.   
  17.  <BODY>  
  18.     <input type="text" name="content" value="这是子窗口">  
  19.     <input type="button" value="确定" onclick="execute()">  
  20.  </BODY>  
  21. </HTML>  
  
22.
  23. -------------------------------------------------------------------------

代码测试通过,只是returnValue一个值,想传多个参数就不行了。

----------------------------------------------------------------------

dialogArguments参数属性
DHTML文档教程

Retrieves the variable or array of variables passed into the modal dialog window.

dhtml语法

    [ vVariables = ] window.dialogArguments

DHTML可能的值

    vVariables String, numeric, object, or array value that specifies arguments.

    The property is read-only. The property has no default value.

Remarks

    The dialogArguments property applies only to windows created using the showmodaldialog and showmodelessdialog methods.

Examples

    The following example shows how to retrieve information passed into a modal dialog window using the dialogArguments property. This example consists of two snippets of code, which correspond to two different files. One file launches the modal window and the other file stores the code for the modal window.

    This file launches the modal window and sends an object to that modal window.
    <HTML>
    <HEAD>
    <SCRIPT>
    function fnLaunch()
    {
    var aForm;
    aForm = 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.
    window.showModalDialog("modalDialogSource.htm", myObject, "dialogHeight:300px; dialogLeft:200px;");
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <BUTTON onclick="fnLaunch();" >Launch The Window</BUTTON>
    <FORM ID= "oForm">
    First Name:
    <INPUT TYPE="text" NAME="oFirstName" VALUE="Jane">
    <BR>
    Last Name:
    <INPUT TYPE="text" NAME="oLastName" VALUE="Smith">
    </FORM>
    </BODY>
    </HTML>


    This file (modalDialogSource.htm), stores the code for the modal window. The object sent to this modal window is retrieved using the dialogArguments property.
    <HTML>
    <HEAD>
    <SCRIPT>
    var oMyObject = window.dialogArguments;
    var sFirstName = oMyObject.firstName;
    var sLastName = oMyObject.lastName;
    </SCRIPT>
    <title>Untitled</title>
    </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>


    This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

是否符合公共标准

    There is no public standard that applies to this property.

Applies To



----------------------------------------------------------------------

showModalDialog和showModelessDialog使用心得

一、showModalDialog和showModelessDialog有什么不同?
  showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。
  showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?
  在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容?
  在showModalDialog和 showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码:

<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>

  将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要配合<base target="_self">使用,不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
   <input type="button" value="关闭" onclick="window.close()">
  也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
  (作者语:本来想用一问一答形式来写的,但是我想不出这个怎么问,所以只好这样了。)
  这个东西比较麻烦,我改了好几次了不是没办法说明白(语文水平越来越差了),只好用个例子说明了。
  例子:
    现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量 var_name

      一般的传递方式:
         window.showModalDialog("filename.htm",var_name)
        //传递var_name变量
      在showModalDialog(或showModelessDialog)读取和设置时:
         alert(window.dialogArguments)//读取var_name变量
         window.dialogArguments="oyiboy"//设置var_name变量
    这种方式是可以满足的,但是当你想在操作 var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。
    
      以下是我建议使用的传递方式:
        window.showModalDialog("filename.htm",window)
        //不管要操作什么变量,只直传递主窗口的window对象
      在showModalDialog(或 showModelessDialog)读取和设置时:
         alert(window.dialogArguments.var_name)//读取var_name变量
         window.dialogArguments.var_name="oyiboy"//设置var_name变量

        同时我也可以操作var_id变量
         alert(window.dialogArguments.var_id)//读取var_id变量
         window.dialogArguments.var_id="001"//设置var_id变量

        同样还可以对主窗口的任何对象进行操作,如form对象里的元素。
         window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
  因为光说很费劲,我就偷点懒,直接用代码来说了,如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

  以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

  主文件的部份js代码。
  var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") // 打开控制窗口
  var s2=showModelessDialog('about:blank',window,"dialogTop:200px; dialogLeft:300px")  //打开被控制窗口

  控制.htm的部份代码。
  <script>
    //操作位置数据,因为窗口的位置数据是"xxxpx"方式的,所以需要这样的一个特殊操作函数。
function countNumber(A_strNumber,A_strWhatdo)
{
  A_strNumber=A_strNumber.replace('px','')
  A_strNumber-=0
  switch(A_strWhatdo)
  {
  case "-":A_strNumber-=10;break;
  case "+":A_strNumber+=10;break;
  }
  return A_strNumber + "px"
}
  </script>
  <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移">
  <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移">
  <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')" value="右移">
  <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')" value="下移">

  以上关键部份是:
    窗口命名方式:var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px")
    变量访问方式:window.dialogArguments.s2.dialogTop

  这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能,通过这个原理,在 showModelessDialog之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。
分享到:
评论

相关推荐

    dialogArguments

    关于dialogArguments属性的介绍

    showModalDialog及dialogArguments使用

    showModalDialog及dialogArguments使用

    js模式化窗口问题![window.dialogArguments]

    主要介绍了js模式化窗口问题![window.dialogArguments],需要的朋友可以参考下

    window.dialogArguments 使用说明

    window.dialogArguments 使用说明,需要的朋友可以参考下。

    jsp 刷新父页面

    用iframe、弹出子页面刷新父页面 iframe parent.location.reload(); 弹出子页面 window.opener.location.reload(); 子窗口刷新父窗口 self.window.opener.locaction.reload(); 刷新一open()方法打开的窗口 ...

    子窗体与父窗体传值示例js代码

    代码如下: //返回值给父窗体 function returnParent(value) {//获取子窗体返回值 var parent = window.dialogArguments; //获取父页面 //parent.location.reload(); //刷新父页面 if (parent != null && parent != ...

    showModalDialog和showModelessDialog的用法

    用事例进行说明。 如:对话框赋给父页面的值 步骤一:父页面CS文件Page_load中执行脚本(打开对话框) Button1.Attributes.Add("onclick","window.showModalDialog('../Dialog/DialogForm.aspx',window)"); 步骤二:...

    JS模态窗口返回值兼容问题的完美解决方法

    因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题。 function OKEnd(vals) { if (vals == null) vals = TRUE; if (typeof (window.opener) == undefined) { ...

    javascript 实现子父窗体互相传值的简单实例

    arguments — 可选参数,类型:变体,用来向对话框传递参数,传递的参数类型不限,包括数组等,对话框通过window.dialogArguments来取得传递进来的参数 features — 可选参数,类型:字符串,用来描述对话框的...

    google不支持window.showModalDialog问题解决方案

    This is a `window.showModalDialog()` shim using a modal HTML5 `&lt;dialog&gt;` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...

    js页面效果很好的流程图

    var opener = window.dialogArguments; var FlowXML = opener.document.all.FlowXML; var xmlDoc = new ActiveXObject('MSXML2.DOMDocument'); xmlDoc.async = false; xmlDoc.loadXML(FlowXML.value); var...

    showModalDialog open弹出子窗口操作parent、opener父窗口及跨域处理

    3&gt; IE与FireFox对两个弹出窗口在跨域时的解析也有不同:通过window.dialogArguments操作父窗口时,在IE下不需要指定document.domain而在FireFox下则正好相反需要指定才能生效;采用opener方式操作父窗口时都不需要...

    JAVASCRIPT下判断IE与FF的比较简单的方式

    但是过程相对复杂一点,当我们只需要一个简单的判断方式时,可以这样做: 代码如下:[removed] if (document.all){ //IE window.dialogArguments.location.reload(); }else{ //FIREFOX opener.location.reload(); } ...

    JS中表单的使用小结

    1.javascript刷新页面的方法 [removed].reload();使用window.open()弹出的弹出窗口,刷新父窗口 window.opener.location.reload() 使用window.showDialog弹出的模式窗口 window.dialogArguments.location.reload()...

    javascript window.opener的用法分析

    window.opener 返回的是创建当前窗口的那个窗口的引用

    showModalDialog:window.showModalDialog polyfill 使用元素

    它在最新的 Google Chrome 和最新的 Mozilla Firefox 中进行了测试,在about:config中将dom.dialog_element.enabled首选项设置为true 。 在使用showModalDialog函数之前,只需包含以下 HTML 代码: [removed]...

    JS中showModalDialog 详细使用.txt

    window.dialogArguments来取得传递进来的参数。 sFeatures -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 1. dialogHeight: 对话框高度,不小于100px 2. ...

    javascript showModalDialog,open取得父窗口的方法

    通常使用window.open的方式开启新窗口的话 要取得父窗口的控件,可以用... 然后接着就是呼叫父窗口的语法 var pWindow=window.dialogArguments; 这样就可以取得父窗口的window对象控制了。例如: window.dialogArgument

Global site tag (gtag.js) - Google Analytics