jquery 查找iframe父级页面元素的实现代码
更新时间：2011年08月28日 17:37:24 作者：
jquery 查找iframe父级页面元素的实现代码，学习jquery的朋友可以参考下。
父页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="height:300px; background-color:#CC9900"></div>
<div>
<iframe src="test_iframe.html"></iframe>
</div>
</body>
</html>
iframe页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$("body",parent.document).append('hahaha');
</script>
</head>
<body>
iframe test--@mybest
</body>
</html>
在jQuery的文档上有这样的记录：
jQuery(html, [ownerDocument])
参数
html String
用于动态创建DOM元素的HTML标记字符串
ownerDocument (可选) Document
创建DOM元素所在的文档
还是要多看，细看文档啊，真是所谓：书读百遍，其义自见啊！
------补记--------------------------
在测试时，发现chrome如何也不能实现上述要求，后来看到网上有人指出iframe不能跨域，这是问题之一，另一个原因是要放到一个站点中去测试
如：http://localhost:8087/test.html
这样chrome也就表现正常了
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="height:300px; background-color:#CC9900"></div>
<div>
<iframe src="test_iframe.html"></iframe>
</div>
</body>
</html>
iframe页面代码
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$("body",parent.document).append('hahaha');
</script>
</head>
<body>
iframe test--@mybest
</body>
</html>
在jQuery的文档上有这样的记录：
jQuery(html, [ownerDocument])
参数
html String
用于动态创建DOM元素的HTML标记字符串
ownerDocument (可选) Document
创建DOM元素所在的文档
还是要多看，细看文档啊，真是所谓：书读百遍，其义自见啊！
------补记--------------------------
在测试时，发现chrome如何也不能实现上述要求，后来看到网上有人指出iframe不能跨域，这是问题之一，另一个原因是要放到一个站点中去测试
如：http://localhost:8087/test.html
这样chrome也就表现正常了
相关文章
使用 jQuery 上传带文件的表单时，会遇到一些小问题。今天小编抽时间给大家介绍使用 jQuery.ajax 上传带文件的表单遇到的问题，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了基于JQuery和DWR实现异步数据传递,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
控制图片宽高的方法有很多，下面为大家介绍下使用jquery是如何实现的，感兴趣的朋友可以学习下2014-01-01
这篇文章主要介绍了JQuery异步加载无限下拉框级联功能的实现,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了jquery实现户籍地选择下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了用简洁的jQuery方法toggleClass实现隔行换色，很简单，但很实用，需要的朋友可以看看2014-10-10
Jq数据列表动态效果，动态更新，支持Ajax动态刷新。下面小编给大家介绍下基于jQuery实现动态数字展示效果，需要的朋友可以参考下2015-08-08
怎么设置文章中所有图片width大小批量设置方法？这在实际应用中很常见，下面有一段示例，希望对大家有所帮助2013-08-08
这篇文章主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下2016-09-09
基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。2010-04-04
最新评论