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

来源：互联网发布：女生学java 编辑：程序博客网时间：2024/05/18 00:10

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>

0 0