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类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
浅析JS运动
Dec 28 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JavaScript多线程详解
2015/08/12 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python del()函数用法
2013/03/24 Python
python实现线程池的方法
2015/06/30 Python
详谈python http长连接客户端
2017/06/12 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
PHP面试题大全
2015/10/16 面试题
机电专业个人求职信范文
2013/12/30 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
考核工作实施方案
2014/03/30 职场文书
植树节活动总结
2014/04/30 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
安全员岗位职责
2015/02/10 职场文书
中秋节感想
2015/08/10 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers