同域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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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/10/09 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python 解析XML文件
2009/04/15 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
学校节能减排倡议书
2014/05/16 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
酒店员工管理制度
2015/08/05 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
mysql数据库隔离级别详解
2022/06/16 MySQL