同域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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
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
一些PHP写的小东西
2006/12/06 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python字典的值可以修改吗
2020/06/29 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
心理学专业求职信
2014/06/16 职场文书
连锁超市项目计划书
2014/09/15 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
送给客户微信问候语!
2019/07/04 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
整理Python中常用的conda命令操作
2021/06/15 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
数据设计之权限的实现
2022/08/05 MySQL