jquery 查找iframe父级页面元素的实现代码


Posted in Javascript onAugust 28, 2011

父页面代码

<!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也就表现正常了

Javascript 相关文章推荐
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
canvas实现图像放大镜
Feb 06 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 #Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 #Javascript
JavaScript 原型继承之构造函数继承
Aug 26 #Javascript
JavaScript原型继承之基础机制分析
Aug 26 #Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
You might like
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python中的格式化输出用法总结
2016/07/28 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
人工神经网络算法知识点总结
2019/06/11 Python
django认证系统 Authentication使用详解
2019/07/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
linux比较文件内容的命令是什么
2013/03/04 面试题
创建文明学校实施方案
2014/03/11 职场文书
应届毕业生求职信
2014/05/26 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL