jquery操作iframe（齐全版，经IE6&IE6+、firefox、chrome测试通过）

最新推荐文章于 2023-04-20 20:28:07 发布

liuyanzhi08

最新推荐文章于 2023-04-20 20:28:07 发布

阅读量4.4k

点赞数 1

分类专栏： jQuery 文章标签： jquery iframe

本文链接：https://blog.csdn.net/nancle/article/details/10546595

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

父窗口获取子窗口元素

$('@selector', window.frames['@iframeID'].document)

子窗口获取父窗口元素
```
$('@selector', parent.document)
```
子窗口获取子窗口元素

$('@selector', parent.window.frames['@iframeID'].document)

附注：出于安全考虑，浏览器不允许脚本跨域访问iframe，谷歌浏览器离线状态下认为脚本访问iframe为跨域访问（跟cookie类似，离线状态下不允许使用cookie）

例子如下：

主窗口：(index.html)

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#test-button').click(function(){
					//获取左边iframe的元素（父窗口获取子窗口元素 ）
					alert($('#test-button', window.frames['left'].document).text());
					//获取右边iframe的元素（父窗口获取子窗口元素 ）
					alert($('#test-button', window.frames['right'].document).text());
				})		
			})
		</script>
	</head>
	<body>
		<iframe id="left"  width="30%" height="50%" src="left.html"></iframe>
		<iframe id="right" width="30%" height="50%" src="right.html"></iframe>
		<button id="test-button">test-button-in-index</button>
	</body>
</html>

左边iframe：(left.html)

<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#test-button').click(function(){
				//获取主窗口iframe的元素（子窗口获取父窗口元素）
				alert($('#test-button', parent.document).text());
				//获取主窗口右边iframe的元素（子窗口获取子窗口元素）
				alert($('#test-button', parent.window.frames['right'].document).text());
			})		
		})
	</script>
	</head>
	<body>
		<button id="test-button">test-button-in-left</button>
	</body>
</html>

右边iframe：(right.html)

<html>
	<head></head>
	<body>
		<button id="test-button">test-button-in-right</button>
	</body>
</html>

本文出自： http://blog.csdn.net/nancle/article/details/10546595

liuyanzhi08

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery操作iframe（齐全版，经IE6&IE6+、firefox、chrome测试通过）

父窗口获取子窗口元素子窗口获取父窗口元素子窗口获取子窗口元素附注：出于安全考虑，浏览器不允许脚本跨域访问iframe，谷歌浏览器离线状态下认为脚本访问iframe为跨域访问（跟cookie类似，离线状态下不允许使用cookie）例子如下：主窗口： $(function(){ $('#test-button').click(function()
复制链接

扫一扫