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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
canvas多重阴影发光效果实现
Apr 20 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
innerText 使用示例
2014/01/23 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python操作xml文件详细介绍
2014/06/09 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
大学生评语大全
2014/04/18 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
质量承诺书怎么写
2014/05/24 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书