jquery对iframe的控制示例

主页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<select id="list">
			<option value="a">a</option>
			<option value="b">b</option>
			<option value="c">c</option>
			<option value="d">d</option>
		</select>
		<input type="button" value="add" id="add" />
		<span id="info">
			
		</span>
		<hr />
		<iframe id="subView" src="addNew-iframe.html" style="width: 500px;height: 500px;"></iframe>
		<script src="js/jquery/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var $list = $("#list"),
				$info = $("#info"),
				$add = $("#add");
				$list.on("click",function (event) {
					var target = event.currentTarget;
					$info.text("你点击了第"+target.selectedIndex+"个，值为"+target.selectedOptions[0].value)
				})
				$add.on("click",function () {
					$list.append($('<option value="new">new</option>'));
				})
		</script>
		<script type="text/javascript">
			var $content = $("#subView").contents();
			var $ilist = $("#list",$content),
				$iinfo = $("#info",$content),
				$iadd = $("#add",$content);
				$ilist.on("click",function (event) {
					var target = event.currentTarget;
					$iinfo.text("你点击了第"+target.selectedIndex+"个，值为"+target.selectedOptions[0].value)
				})
				$iadd.on("click",function () {
					$ilist.append($('<option value="new">new</option>'));
				})
		</script>
	</body>

</html>

html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<select id="list">
			<option value="a">a</option>
			<option value="b">b</option>
			<option value="c">c</option>
			<option value="d">d</option>
		</select>
		<input type="button" value="add" id="add" />
		<span id="info">
			
		</span>
	</body>

</html>
posted @ 2016-11-30 20:52  DHclly  阅读(134)  评论(0)    收藏  举报