做WEB前端开发的过程中，经常会有这样的需求，用户点击【编辑】按钮，弹出一个对话框，在里边修改相应的值，然后把修改后的值显示在原页面，最后点击保存。
用window.parent.document.getElementById().setAttribute("value","")可以很好的解决这个问题。
源代码如下：
父页面中的代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body style="height:3000px"> <input type="text" id="parent"> <button id="parentBtn">编辑</button> <div class="clear" style="500px;height:200px;border:1px solid red;position:fixed;top:100px;left:100px;display:none"> <iframe src="son.html" style="border:none"></iframe> </div> <button id="content">获取内容值</button> </body> </html> <script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script> <script type="text/javascript"> $("#parentBtn").click(function(){ $(".clear").show(); }) $("#content").click(function(){ alert($("#parent").val()); }) </script>
子页面中的代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <input type="text" id="son"> <button id="sonBtn">确定</button> </body> </html> <script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script> <script type="text/javascript"> $("#sonBtn").click(function(){ var $val = $("#son").val(); $("#parent", window.parent.document).val($val);//jQuery写法给父页面传值大笑 //window.parent.document.getElementById("parent").setAttribute("value",$val);//原生javascript写法给父页面传值 $(".clear", window.parent.document).hide();//jQuery写法控制父页面中的某个元素隐藏 //window.parent.document.getElementsByClassName("clear")[0].style.display = "none";//原生javascript写法控制父页面中的某个元素隐藏 }) </script>