同域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 contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
10分钟学会js处理json的常用方法
Dec 06 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python打印输出数组中全部元素
2018/03/13 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
大学生创业感言
2014/01/25 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
琅琊山导游词
2015/02/05 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python