同域之下子iframe的DOM控制问题

2018-06-24 01:30:13来源：未知阅读 ()

new_file.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-2.1.1.min.js"></script>
	</head>
	<style>
		iframe{
			border: 1px solid red;
		}
	</style>
	<body>
		<div id="father">父级的内容(点击导致子iframe的字体变蓝)</div>
		<iframe src="new_file2.html" id="myFrame" frameborder="0" width="200px" height="200px"></iframe>
		<div>点击iframe里面的标签触发父级的事件。</div>
		<div>点击父级的标签，触发iframe里的事件。</div>
		<script>
			$('#myFrame').on('load',function(event){
				$('#son',this.contentDocument).click(function(){
					alert('子级调父级');
					$('#father').css('color','red');
				})
			})
			$('#father').click(function(){
				alert('开始调子级');
				var son = document.getElementById('myFrame').contentWindow.document.getElementById('son');
				son.style.color='blue';
			})
		</script>
	</body>
</html>

new_file2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="son">子iframe的内容(点击导致父级字体变红)</div>
	</body>
</html>

　　说明：

1：为iframe中的某标签绑定事件，控制iframe之外的标签。

2：为父级body中的标签绑定事件，控制iframe之中的某标签。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有