js父子页面模态窗口传值

忘是亡心i 2022-08-09 11:55 17阅读 0赞

今天闲来无事，练习父页面中打开一个模态窗口，同时可以将父页面的某些数据传到模态窗口,并将模态窗口的数据回传到父页面。在chrome浏览器上有问题通过bug调试,chrome并不支持,

window.showModalDialog模态窗口。有更好的解决方法欢迎大家喷！！！

1.父页面parent1.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	负责人:<input id="name" type="text" name="name"><a href="javascript:openWin();" >选择</a>
    </body>
    <script type="text/javascript">
    	
    	//window.location;
    	function openWin(){
    		//给被打开的窗口穿过去的参数
    		var param = {
    			win:window,
    			name:document.getElementById("name").value
    		};
    		//被打开的模态窗口的样式
    		styleParam = "dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes";
    		//模态窗口的返回值
    		var returnValue = window.showModalDialog("child1.html",param,styleParam);
    		//for chrome
    		if (!returnValue) {
    		    returnValue = window.returnValue;
    		}
    		if(returnValue!=null){
    			document.getElementById("name").value = returnValue;
    		}
    	}
    	
    </script>
    </html>

2.子页面child.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<input type="text" id="content"><input type="button" id="btn" value="OK" οnclick="selectValue();"> 
    </body>
    <script type="text/javascript">
    	//获取父页面传来的参数
    	var args = window.dialogArguments;
    	//父页面的window对象
    	var win = args.win;
    	document.getElementById("content").value = args.name;
    	
    	function selectValue(){
    		var xxx = {
    			age:12,
    			bitr:new Date()
    		};
    		if (window.opener) {
    		    //for firehox \chrome
    		    alert("if");
    		    window.opener.returnValue = document.getElementById("content").value;
    		}else {
    			alert("else");
    		    window.returnValue = document.getElementById("content").value;
    	    }
    		window.close();
    	}
    </script>
    </html>