一 在父页面操作子页面

 
IE下操作IFrame内容的代码:

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

详细代码如下:
TestIFrame.htm:

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function f(){
  5.         var doc;
  6.  
  7.         if (document.all){//IE
  8.                 doc = document.frames["MyIFrame"].document;
  9.         }else{//Firefox
  10.                 doc = document.getElementById("MyIFrame").contentDocument;
  11.         }
  12.  
  13.         doc.getElementById("s").style.color="blue";
  14. }
  15. </script>
  16. </head>
  17. <body onload="f()">
  18.  
  19. <iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.htm" width = "100" height="100"></iframe>
  20.  
  21. </body>
  22. </html>

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

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function f(){
  5.         //var doc = window.frames["MyIFrame"].document;  2中都可以
  6.         var doc = document.getElementById("MyIFrame").contentDocument;
  7.         doc.getElementById("s").style.color="blue";
  8. }
  9. </script>
  10. </head>
  11. <body onload="f()">
  12.  
  13. <iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.html" width = "100" height="100"></iframe>
  14.  
  15. </body>
  16. </html>

二 在子页面中操作父页面

父页面操作子页面

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.  
  6.         <h2 id="s">55555555555555555555555555</h2>
  7.         <script>
    　　　　　　　//window.parent是获得父窗口的window对象
                window.parent.document.getElementById("txt").innerHTML="你猜怎么样";
  8.  
  9.         </script>
  10. </body>
  11. </html>

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

  1. <html>
  2. <head>
  3.  
  4. </head>
  5. <body>
  6. <iframe id = "MyIFrame" name = "MyIFrame" src = "MyIFrame.html" width = "100" height="100"></iframe>
  7. <script type="text/javascript">
  8.     window.onload=function(){
  9.         //window.frames["MyIFrame"].window.test();
  10.         document.getElementById("MyIFrame").contentWindow.test();
  11.     }
  12. </script>
  13. </body>
  14. </html>

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

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.         <h2 id="s">55555555555555555555555555</h2>
  6.           <script type="text/javascript">
  7.                 window.onload=function(){
  8.                 window.parent.test();
  9.             }
  10.         </script>
  11. </body>
  12. </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. Java Web整合开发(12) -- JDBC

    JDBC访问数据库的一般步骤: 注册驱动,获取连接,获取Statement,执行SQL并返回结果集,遍历结果集显示数据,释放连接. Connection conn = null; Statement ...

  2. CQRS 示例

    CQRS 示例 上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA ...

  3. MVC 插件化框架支持原生MVC的Area和路由特性

    .NET MVC 插件化框架支持原生MVC的Area和路由特性 前面开放的源码只是简单的Plugin的实现,支持了插件的热插拔,最近晚上偶然想到,原生的MVC提供Areas和RouteAtrribut ...

  4. Cannot find ActionMappings or ActionFormBeans collection

    出现此问题.首先检查web.xml,的主要结构被认为是在下面的图: 再检查struts-config.xml.确认是否有<form-beans>和<action-mappings&g ...

  5. centos7的安装

    初装centos7还是在九月份,那时候关于win7 下centos7硬盘安装的资料很少,现在就好多, 在这里备份下东西吧 首先是安装的时候,关于找从那个地方找image的问题. hda ,sda分别表 ...

  6. Django----模板

    为了将html页面和python代码分离开来,有必要介绍一下模板的作用,Django中自带很多模板. 以下一个html模板文件: <html> <head><title& ...

  7. Web API-属性路由

    路由(Routing)就是Web API如何将一个URI匹配到一个action的过程.Web API 2 支持一个新的路由方式-属性路由(attribute routing).顾名思义,属性路由使用标 ...

  8. web设计师和前端设计师的互动—前端工程师应该具备的三种思维

    如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...

  9. java压缩zip文件中文乱码问题(转——作者：riching)

    本人遇到了同样的问题,用了以下方案,奇迹般的解决了.我很纳闷为什么,经理说:好读书,不求甚解,不要问为什么... 用java来打包文件生成压缩文件,有两个地方会出现乱码 1.内容的中文乱码问题,这个问 ...

  10. How to:installshield安装包怎样才能出现选择路径的界面？

    原文:How to:installshield安装包怎样才能出现选择路径的界面? 这个问题新手问的很多,installshield的安装包默认设置下选择路径的界面藏在Custom安装类型下.在做完安装 ...