一 在父页面操作子页面

 
IE下操作IFrame内容的代码:

document.frames["MyIFrame"].document.getElementById("s").style.color="blue";
但是这在Firefox下无效。
所以，想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现:
 
document.getElementById("MyIFrame").contentDocument.getElementById("s").style.color="blue";

详细代码如下:
TestIFrame.htm:

<html>

<head>

<script type="text/javascript">

function f(){

        var doc;

        if (document.all){//IE

                doc = document.frames["MyIFrame"].document;

        }else{//Firefox

                doc = document.getElementById("MyIFrame").contentDocument;

        }

        doc.getElementById("s").style.color="blue";

}

</script>

</head>

<body onload="f()">

<iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.htm" width = "100" height="100"></iframe>

</body>

</html>

其实可以用一种通用方法:

<html>

<head>

<script type="text/javascript">

function f(){

        //var doc = window.frames["MyIFrame"].document;  2中都可以

        var doc = document.getElementById("MyIFrame").contentDocument;

        doc.getElementById("s").style.color="blue";

}

</script>

</head>

<body onload="f()">

<iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.html" width = "100" height="100"></iframe>

</body>

</html>

二 在子页面中操作父页面

父页面操作子页面

<html>

<head>

</head>

<body>

        <h2 id="s">55555555555555555555555555</h2>

        <script>
　　　　　　　//window.parent是获得父窗口的window对象
            window.parent.document.getElementById("txt").innerHTML="你猜怎么样";

        </script>

</body>

</html>

三 在父页面调用子页面的函数

<html>

<head>

</head>

<body>

<iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.html" width = "100" height="100"></iframe>

<script type="text/javascript">

    window.onload=function(){

        //window.frames["MyIFrame"].window.test();

        document.getElementById("MyIFrame").contentWindow.test();

    }

</script>

</body>

</html>

四  在子页面调用父页面的函数

<html>

<head>

</head>

<body>

        <h2 id="s">55555555555555555555555555</h2>

          <script type="text/javascript">

                window.onload=function(){

                window.parent.test();

            }

        </script>

</body>

</html>

总结:iframe中的src是不能跨域的，如果跨域则无法进行操作。

js操作iframe总结的更多相关文章

  1. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  2. JS 操作iframe

    很多人一直都有个想法,要是可以随心所欲的操作iframe就好了.这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力. 通过Javasc ...

  3. [置顶] js操作iframe兼容各种浏览器

    在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...

  4. JS操作iframe

    1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...

  5. JS操作iframe元素

    1.  demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...

  6. js操作iframe框架时应该屡清楚的一些概念

    1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...

  7. js操作Iframe非当前最上层窗体

    如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口.  <script language="javascript" type="tex ...

  8. 百度地图和js操作iframe

    document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv" ...

  9. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

随机推荐

  1. Android APK反编译就这么简单 详细解释（简介）

    学习Android开发过程,你会向别人学习如何应用软件的开发,那些漂亮的动画和复杂的布局可能让你爱不释手,作为开发者.你可能真的想知道的是如何实现的界面效果.然后.您将能够更改应用程序APK反编译查看 ...

  2. php_json入库有关

    php入库json信息 有些字符需要特殊处理 //组装 $test=array(); $test["k1"]= urlencode($k1); $test["k2&quo ...

  3. cocos2d 缓存池 对象的再利用

    1.简单的叙述说明池 例如,我们知道,游戏的游戏类型跑酷,游戏元素都在不断重复.游戏的内容将继续从屏幕右侧的创建,当元件在屏幕的左侧的,将消失.假设不变new 对象.release 对象 性能影响.怎 ...

  4. php_PHP与Mysql的连接

    展示效果: 繁写: <?php    echo "This is a test</br>";     echo "asdfasdfadsf"; ...

  5. Swift中文教程(六)--枚举和结构

    原文:Swift中文教程(六)--枚举和结构 Enumerations 枚举 使用 enum 来创建一个枚举.跟Classes(类)和其他类型的命名方式一样,枚举也可以有Method(方法). enu ...

  6. 编译 & 预处理

    编译(compilation , compile) 1.利用编译程序从源语言编写的源程序产生目标程序的过程. 2.用编译程序产生目标程序的动作. 编译就是把高级语言变成计算机可以识别的2进制语言,计算 ...

  7. C控制语句--分支和跳转

    /*C控制语句--分支和跳转*/ /*关键字 if else switch continue break case default goto 运算符:&&(且) ||(或) ?:(三元 ...

  8. 音乐TV2015校园招聘A第二大发行量（对中国科学院大学站）

    标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数位,但是,一些数字多次出现,有些数字不出现.请设计算法和程序.统计数据不会出现什么.什么号码多次出现. 您可以O(n)时间复杂度,O(1)求下完毕么 ...

  9. Struts2和Struts1的主要区别（完整版）

    Struts1和Struts2的区别和对比: Action 类: • Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口,而struts2的Act ...

  10. POJ 2114 Boatherds 划分树

    标题效果:鉴于一棵树,问有两点之间没有距离是k的. 数据的多组 思维:和IOI2011的Race喜欢.不是这么简单.阅读恶心,我是在主要功能的别人的在线副本. CODE: #include <c ...