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 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
js实现五星评价功能
Mar 08 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python扩展内置类型详解
2018/03/26 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python执行时间的几种计算方法
2020/07/31 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
小区门卫值班制度
2014/01/24 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
会计员岗位职责
2014/03/15 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
网站创业计划书
2014/04/30 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
MySQL8.0.18配置多主一从
2021/06/21 MySQL
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL