同域jQuery(跨)iframe操作DOM(示例代码)


Posted in Javascript onDecember 13, 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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
javascript分页代码实例分享(js分页)
Dec 13 #Javascript
jquery 操作iframe的几种方法总结
Dec 13 #Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 #Javascript
jquery如何获取复选框的值
Dec 12 #Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php 获取客户端的真实ip
2009/11/30 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
php备份数据库类分享
2015/04/14 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
详解Python在七牛云平台的应用(一)
2017/12/05 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python eval函数介绍及用法
2020/11/09 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
护理助产毕业生的求职信
2014/03/02 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
北京英文导游词
2015/02/12 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
管理失职检讨书
2015/05/05 职场文书
超搞笑婚前保证书
2015/05/08 职场文书