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 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
js实现抽奖功能
Nov 24 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
django序列化serializers过程解析
2019/12/14 Python
如何基于python操作excel并获取内容
2019/12/24 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
军训自我鉴定
2013/12/14 职场文书
结对共建工作方案
2014/06/02 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书