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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JavaScript 反射学习技巧
Oct 16 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将数据导入到Foxmail的实现代码
2010/09/05 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
error和exception有什么区别
2012/10/02 面试题
简历中的自我评价怎么写
2014/01/29 职场文书
初中同学会活动方案
2014/08/22 职场文书
校外活动方案
2014/08/28 职场文书
影视广告专业求职信
2014/09/02 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
同学聚会通知短信
2015/04/20 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
React Fragment介绍与使用详解
2021/11/11 Javascript
MySQL插入数据与查询数据
2022/03/25 MySQL