JS操作iframe里的dom(实例讲解)


Posted in Javascript onJanuary 29, 2014

直接赋值如下代码测试即可明白:

1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="line">====================注意:测试从这里开始=========================</div>
<p id="pox">用来测试子窗体iframeA访问父窗体的某元素</p>
<div class="line">====================iframe分割线=========================</div>
<iframe src="a.html" width="100%" frameborder="0" id="frameA" name="frameA"></iframe>
<iframe src="b.html" name="iframeB" width="100%" frameborder="0" id="frameB"></iframe>
<div class="line">====================iframe分割线=========================</div>
<p>先来演示:父窗体访问子窗体中的某方法或元素</p>
<p>总结:父窗体访问子窗体的方法跟元素采用不同的方式</p>
<input type="button" onclick="frameDiv()" value="父窗体访问子窗体中的某元素" />
<input type="button" onclick="frameFun()" value="父窗体访问子窗体中的某方法" />
<script type="text/javascript">
    //子窗口访问父窗口方法
    function testP(ss){
        alert(ss)
    }
    //取得iframe的元素
    function getIframe(id){
        return document.getElementById(id).contentWindow.document;
    }
    //父窗口访问子窗口元素
    function frameDiv(){
        getIframe("frameA").getElementById("ooxx").style.backgroundColor="#f00"
        //window.frames["iframeA"].getElementById("ooxx").style.backgroundColor="#f00"  //不能通过这种形式访问某元素
    }
    //父窗口访问子窗口方法
    function frameFun(){
        //getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法
       // window.frames["iframeB"].getsFun();
  alert(window.frames["iframeB"].getsFun());
    }
</script> 
</body>
</html>

a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="ooxx">用来测试父窗体访问子窗体中的某元素</div>
<p id="divooxx">用来测试子窗口B访问窗体A的某元素</p>
<p>1.子窗口iframeA访问父窗口的某元素</p>
<input type="button" onclick="frameToPdiv()" value="子窗口访问父窗口的某元素" />
<input type="button" onclick="frameToPfun()" value="子窗口访问父窗口的某方法" />
<script type="text/javascript">
    //子窗口访问父窗口的某元素
    function frameToPdiv(){
        parent.document.getElementById("pox").style.color="#fff";
        parent.document.getElementById("pox").style.backgroundColor="#f0a0f0"
    }
    //子窗口访问父窗口方法
    function frameToPfun(ss){
        parent.testP("ssss");
    }
    //用于测试iframeB访问的方法
    function testBA(){
        alert("用于测试iframeB访问的方法")
    }
</script>
</body>
</html>

b.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p>二:测试子窗体间相互访问某方法或元素</p>
<input type="button" value="子窗体B访问子窗体A的某元素" onclick="frameTframeDiv()" />
<input type="button" value="子窗体B访问子窗体A的某方法" onclick="frameTframeFun()" />
<script type="text/javascript">
    //子窗体B访问子窗体A的某元素
    function frameTframeDiv(){
        //parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.color="#a0c0f0";
        //parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.backgroundColor="#000"
        var _bframe=parent.getIframe("frameA");//子窗体访问父窗体方法
        _bframe.getElementById("divooxx").style.color="#a0c0f0";
        _bframe.getElementById("divooxx").style.backgroundColor="#000";
    }
    //子窗体B访问子窗体A的某方法
    function frameTframeFun(){
            window.parent.frames["frameA"].testBA();
    }
</script>
<script type="text/javascript">
    function getsFun(){
        return "sssssss";
    }
    //getFun()
</script>
</body>
</html>
Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
理解Javascript闭包
Nov 01 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
微信小程序实现授权登录
May 15 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 #Javascript
js中的preventDefault与stopPropagation详解
Jan 29 #Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 #Javascript
js的正则test,match,exec详细解析
Jan 29 #Javascript
js正则表达exec与match的区别说明
Jan 29 #Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 #Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 #Javascript
You might like
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
jquery对表单操作2
2011/04/06 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Python sorted对list和dict排序
2020/06/09 Python
python读取xml文件方法解析
2020/08/04 Python
python os.rename实例用法详解
2020/12/06 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
学习保证书100字
2015/02/26 职场文书
Django与数据库交互的实现
2021/06/03 Python
Python中的tkinter库简单案例详解
2022/01/22 Python
MySQL查询日期时间
2022/05/15 MySQL
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技