同域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 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
js实现百度搜索提示框
Feb 05 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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缓存技术详细总结
2013/08/07 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python封装shell命令实例分析
2015/05/05 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
会计主管岗位职责
2014/01/03 职场文书
《手指教学》反思
2014/02/14 职场文书
高中军训感言800字
2014/03/05 职场文书
大课间活动实施方案
2014/03/06 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2014年度个人总结范文
2015/03/09 职场文书
尼克胡哲观后感
2015/06/08 职场文书
停发工资证明范本
2015/06/12 职场文书
python_tkinter事件类型详情
2022/03/20 Python