Hi,网页设计师综合门户欢迎您!
设为首页  加为收藏  我要投稿找回密码免责声明意见反馈

招聘精英个人求职推广网站网友作品网页特效动画欣赏网页素材酷站欣赏源码下载设计软件

  • 全站搜索
  • 新闻资讯
  • 网页教程
  • 平面教程
  • 程序设计
  • 视频教程
  • Flash教程

网页设计师提供网页设计、网站程序开发、系统开发等,请联系QQ 103198680

 您当前的位置:首页 > 阅读文章
网页设计师综合门户欢迎您!

JS操作iframe里的dom的介绍

刊登方式:转载   来源:网络  作者:  关键词:平面设计理念  更新时间:2017/7/4

本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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

 

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>