同域jQuery(跨)iframe操作DOM(实例讲解)


Posted in Javascript onDecember 19, 2013

frame目前还是比较流行的,许多地方都通过它来实现特殊的情况。比如说传统的上传、select在ie6下、代理、跨域等等。今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面。

<iframe src="a.php" id="aa"></iframe> 
<iframe src="b.php" id="bb"></iframe> 
<input type="button" id="read-aa" value="读取iframe #aa"> 
<input type="button" id="write-aa" value="写入iframe #aa">

$('#read-aa').click(function() 
{ 
    var v=$('#aa').contents().find('body').html(); 
    alert(v); 
}); 
$('#write-aa').click(function() 
{     $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容'); 
});

主要方法是 contents(),读取iframe。

2、iframe跨父框架操作iframe

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title> 
<script src="public/jQuery.js"></script> 
<script> 
$(function() 
{ 
    $('#read-parent-aa').click(function() 
    { 
        var v=$('body',parent.document).find('#aa').contents().find('body').html(); 
        alert(v); 
    }); 
    $('#write-parent-aa').click(function() 
    { 
        $('body',parent.document).find('#aa').contents().find('div').append('<hr>这是bb.php操作aa.php写入的内容'); 
    }); 
}); 
</script> 
<div> 
这是iframe #bb里的内容 
</div> 
<input type="button" id="read-parent-aa" value="跨父读取iframe #aa"> 
<input type="button" id="write-parent-aa" value="跨父写入iframe #aa">

HTML:代码
<!DOCTYPE html>
<meta charset="utf-8">
<title>jQuery操作iframe</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">
<script> 
$(function()
{
 $('#read-aa').click(function()
 {
  var v=$('#aa').contents().find('body').html();
  alert(v);
 });
 $('#write-aa').click(function()
 {  $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');
 });
});
</script>
Javascript 相关文章推荐
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
js实现拖动缓动效果
Jan 13 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 #Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 #Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 #Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 #Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 #Javascript
javascript中数组的concat()方法使用介绍
Dec 18 #Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 #Javascript
You might like
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
统计员岗位职责
2013/11/14 职场文书
总裁办公室主任职责
2014/01/02 职场文书
毕业实习评语
2014/02/10 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
2014年教育工作总结
2014/11/26 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
实习生辞职信范文
2015/03/02 职场文书
旗帜观后感
2015/06/08 职场文书
教师教育心得体会
2016/01/19 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python