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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JS实现简单随机3D骰子
Oct 24 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
JS实现放大镜效果
Sep 21 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php搜索文件程序分享
2015/10/30 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
js实现随机抽奖
2020/03/19 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python decimal模块使用方法详解
2020/06/08 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
优秀生推荐信范文
2013/11/28 职场文书
企业军训感言
2014/02/08 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
学校安全责任书
2014/04/14 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
贷款承诺书
2015/01/20 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
在校学生证明格式
2015/06/24 职场文书
销售人员管理制度
2015/08/06 职场文书
食品安全主题班会
2015/08/13 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis