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 @   DHclly  阅读(124)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示