一 在父页面操作子页面

 
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. ORACLE查看和更改的最大连接数

     第一步,在cmd命令行,进入sqlplus 第二步骤,根据提示输入username与password 1. 视图processes和sessions参数 SQL> show paramet ...

  2. 变焦控制ZoomControls

    在安卓的webview中有这个点击放大缩小button,当时就在想如何实现那种效果,弄一个两个图标的ImageButton.但感觉又有些麻烦,昨天看疯狂安卓书.无意中发现另一个 ZoomButtons ...

  3. cralwer_爬虫代理中心的简要设计

    代理中心: 简单讲: 精细化控制限制资源的使用,保证有限资源的充分利用及有效性.支持动态增减,实时更新. 需求 rest api提供请求输入与输出 客户端使用代理心跳接收,用于更新代理的使用次数,被占 ...

  4. 玩转Vim-札记

    玩转Vim-札记 距上篇博文已有一周有余,上次主要介绍了编辑器之神Vim的起源.安装并介绍了两种模式以及一些简单的操作.本次将继续对Vim的使用进行介绍. 登堂入室 首先接着说移动吧: 1 0 → 数 ...

  5. 各种加密解密函数（URL加密解密、sha1加密解密、des加密解密）

    原文:各种加密解密函数(URL加密解密.sha1加密解密.des加密解密) 普通hash函数如md5.sha1.base64等都是不可逆函数.虽然我们利用php可以利用这些函数写出可逆函数来.但是跨语 ...

  6. struts2基本介绍

    前言 文本 Struts2 Apache SoftWare Foundation Tomcat/Struts1/Struts2/Ibaitas/ MVC框架:Struts1/Struts2/JSF/W ...

  7. C# 实现设置系统环境变量设置

    原文:C# 实现设置系统环境变量设置 以前实现系统环境变量设置时是要在电脑属性--高级--环境变量设置,实现方式主要有2种, 修改注册表,添加环境变量 调用系统Kernel32.DLL函数,设置环境变 ...

  8. 欧几里德欧几里德原理和扩展的原则，(Euclidean Theory and Extended Euclidean Theory)学习笔记

    题记:这是我第四次审查扩展欧几里德原理,由于不经常使用.当你想使用,可以不记得细节,经常检查信息,所以,简单地梳理这一原则和扩展欧几里德的原则,以博客存档以备查用. 一个.欧几里德原理 欧几里德原理( ...

  9. Pki原则

    核心提示: 公开密钥和公开密钥证明书,产生的私钥client要么server证书.加密的公共密钥才能解密私钥文件只.私钥只能解密公开的加密文件.公众认为,它是开放的.所有的人都能够得到它.私人还表明, ...

  10. 把VBScript的函数迁移到C#.NET

    原文:把VBScript的函数迁移到C#.NET VBScript 5.6 Functions C# code Abs System.Math.Abs Array New Object() { } A ...