解决原生js或jQuery 实现父窗口的问题,如window.parent.document.getElementByI

阅读() @2019-03-17 16:05:05

做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="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>

子页面中的代码:

<!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>

效果预览 源码下载

相关推荐:《JavaScript用window.opener实现父窗口和子窗口传值》。

加入QQ群,在群文件中免费下载源码提取密码!
微信二维码