同域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 相关文章推荐
easyui Droppable组件实现放置特效
Aug 19 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
javascript自执行函数
Feb 10 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
详解Vue方法与事件
Mar 09 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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代码
2006/12/06 PHP
php返回json数据函数实例
2014/10/09 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vue自定义正在加载动画的例子
2019/11/14 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
批处理与python代码混合编程的方法
2016/05/19 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Android分包MultiDex策略详解
2017/10/30 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
NumPy统计函数的实现方法
2020/01/21 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
简述数组与指针的区别
2014/01/02 面试题
如何利用find命令查找文件
2016/11/18 面试题
出纳岗位职责
2013/11/09 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书