做WEB前端开发的过程中，经常会有这样的需求，用户点击【编辑】按钮，弹出一个对话框，在里边修改相应的值，然后把修改后的值显示在原页面，最后点击保存。用window.parent.document.getElementById("").setAttribute("value", "")可以很好的解决这个问题。
父页面中的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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="width: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>
子页面中的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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();
// JQuery写法给父页面传值
$("#parent", window.parent.document).val($val);
// 原生javascript写法给父页面传值
// window.parent.document.getElementById("parent").setAttribute("value", $val);
// JQuery写法控制父页面中的某个元素隐藏
$(".clear", window.parent.document).hide();
// 原生javascript写法控制父页面中的某个元素隐藏
// window.parent.document.getElementsByClassName("clear")[0].style.display = "none";
})
</script>