js操作模态窗口及父子窗口间相互传值示例

186 阅读 0 评论 123 点赞

我是靠谱客的博主魁梧乐曲，最近开发中收集的这篇文章主要介绍js操作模态窗口及父子窗口间相互传值示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

parent.hmtl

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>父窗口</title> 
<script type="text/javascript"> 

window.onload=function(){ 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
var obj={ 
test:"张三传到子窗口", 
win:window 
}; 
var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes"); 
if(returnValue != null){ 
document.getElementById("content").innerHTML = returnValue; 
} 
}; 
} 
</script> 
</head> 
<body> 
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div> 
<input type="button" id="btn" value="弹出子窗口"> 
</body> 
</html> 

child.html

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>子窗口</title> 
<script type="text/javascript"> 
window.onload=function(){ 
//获取url的传参 
var args = window.dialogArguments; 
var win = args.win;//父窗口对象 
var content=document.getElementById("content"); 
content.value=args.test; 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
//模态对话框将值 
window.returnValue = content.value; 
window.close(); 
} 
} 
</script> 
</head> 
<body> 
<input type="text" id="content"><input type="button" id="btn" value="传值给父窗口"> 
</body> 
</html 