同域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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php中error与exception的区别及应用
2014/07/28 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python单例模式实例分析
2015/01/14 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python进行两个表格对比的方法
2018/06/27 Python
Python3爬楼梯算法示例
2019/03/04 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
基层党支部整改方案
2014/10/25 职场文书
退学证明范本3篇
2014/10/29 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2015年共青团工作总结
2015/05/15 职场文书
教师节简报
2015/07/20 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电