这篇文章主要介绍了 js 操作模态窗口及父子窗口间相互传值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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
来源: