js操作模态窗口及父子窗口间相互传值示例
JS 操作 示例 窗口 相互 传值 模态 父子
2023-06-13 09:15:27 时间
parent.hmtl
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>父窗口</title>
<scripttype="text/javascript">
window.onload=function(){
varbtn=document.getElementById("btn");
btn.onclick=function(){
varobj={
test:"张三传到子窗口",
win:window
};
varreturnValue=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>
<divid="content"style="margin:50px;width:100px;height:150px;border:5pxsolid#0000ff;"></div>
<inputtype="button"id="btn"value="弹出子窗口">
</body>
</html>
child.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>子窗口</title>
<scripttype="text/javascript">
window.onload=function(){
//获取url的传参
varargs=window.dialogArguments;
varwin=args.win;//父窗口对象
varcontent=document.getElementById("content");
content.value=args.test;
varbtn=document.getElementById("btn");
btn.onclick=function(){
//模态对话框将值
window.returnValue=content.value;
window.close();
}
}
</script>
</head>
<body>
<inputtype="text"id="content"><inputtype="button"id="btn"value="传值给父窗口">
</body>
</html
相关文章
- JS中的那些循环
- 牛客网js题库正解(41-60)
- 解决aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:62356/Admin/' failed问题
- js的正则对象详解编程语言
- JavaScript轻松连接Oracle数据库,轻松搞定数据操作。(js连接oracle数据库)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- js另类写法
- js操作select控件的几种方法
- CSS和JS标签style属性对照表(方便js开发的朋友)
- js对象之JS入门之Array对象操作小结
- 计算世界完全对称日的js代码,粗糙版
- 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
- js操作select和option常用代码整理
- js在定义的时候立即执行的函数表达式(function)写法
- js数组的操作详解
- Node.js生成HttpStatusCode辅助类发布到npm
- 封装html的select标签的js操作实例
- js操作label给label赋值及取label的值示例
- jscall方法详细介绍(js的继承)
- js脚本实现数据去重