一 在父页面操作子页面

 
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. ABP模块系统

    ABP模块系统 基于DDD的现代ASP.NET开发框架--ABP系列之4.ABP模块系统 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP ...

  2. python_基础学习_01_按行读取文件的最优方法

    python 按行读取文件 ,网上搜集有N种方法,效率有区别,先mark最优答案,下次补充测试数据 with open('filename') as file: for line in file: d ...

  3. python_在windows下安装配置python开发环境及Ulipad开发工具

    最近开始学习Python,在网上寻找一下比较好的IDE.因为以前用C#做开发的,用Visual Studio作为IDE,鉴于用惯了VS这么强大的IDE,所以对IDE有一定的依赖性. Python的ID ...

  4. CSharp设计模式读书笔记（17）：迭代器模式(学习难度：★★★☆☆，使用频率：★★★★★)

    迭代器模式(Iterator Pattern):提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor). 模式角色与结构: 实现代码: using System; us ...

  5. 菜鸟学Java（二十一）——怎样更好的进行单元測试——JUnit

    測试在软件生命周期中的重要性,不用我多说想必大家也都很清楚.软件測试有许多分类,从測试的方法上可分为:黑盒測试.白盒測试.静态測试.动态測试等:从软件开发的过程分为:单元測试.集成測试.确认測试.验收 ...

  6. update与fixedupdate差别

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网--Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=307 今天有人问我问什么我在处 ...

  7. CSS3+HTML5特效5 - 震动的文字

    先看效果(把鼠标移上去看看) abcd 这个效果很简单,就是移动文字的位置模拟出震动的效果. Css <style> @-webkit-keyframes shake { 0%{ -web ...

  8. canvas绘制贝塞尔曲线

    原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...

  9. 利用EntityFramework获得双色球数据库

    原文 利用EntityFramework获得双色球数据库 双色球想必大家都很熟悉了,尽管屡买屡不中,但还是会买.以前就想过利用双色球的走势图得到双色球的数据库,至于得到数据库干什么倒没想过,不过对以往 ...

  10. JavaScript/js把秒或者毫秒换算成xx-xx-xx 时-分-秒的形式

    function MillisecondToDate(msd) { // var time = parseFloat(msd) / 1000; var time=msd; if (null != ti ...