同域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学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
Table冻结表头示例代码
Aug 20 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
Angular排序实例详解
2017/06/28 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
2014年社会实践活动总结范文
2014/04/29 职场文书
社会调查研究计划书
2014/05/01 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书