`
hgfghwq10
  • 浏览: 44295 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS操作iframe里的dom,js iframe

 
阅读更多

  直接赋值如下代码测试即可明白:
  1.html:
  
  
  
  
  无标题文档
  
  
  ====================注意:测试从这里开始=========================
  用来测试子窗体iframeA访问父窗体的某元素
  ====================iframe分割线=========================
  
  
  ====================iframe分割线=========================
  先来演示:父窗体访问子窗体中的某方法或元素
  总结:父窗体访问子窗体的方法跟元素采用不同的方式
  
  
  
  //子窗口访问父窗口方法
  function testP(ss){
  alert(ss)
  }
  //取得iframe的元素
  function getIframe(id){
  return document.getElementById(id).contentWindow.document ;
  }
  //父窗口访问子窗口元素
  function frameDiv(){
  getIframe("frameA").getElementById("ooxx").style.b ackgroundColor="#f00"
  //window.frames["iframeA"].getElementById("ooxx"). style.backgroundColor="#f00"  //不能通过这种形式访问某元素
  }
  //父窗口访问子窗口方法
  function frameFun(){
  //getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法
  // window.frames["iframeB"].getsFun();
  alert(window.frames["iframeB"].getsFun());
  }
   
  
  
  a.html
  
  
  
  
  无标题文档
  
  
  用来测试父窗体访问子窗体中的某元素
  用来测试子窗口B访问窗体A的某元素
  1.子窗口iframeA访问父窗口的某元素
  
  
  
  //子窗口访问父窗口的某元素
  function frameToPdiv(){
  parent.document.getElementById("pox").style.color= "#fff";
  parent.document.getElementById("pox").style.backgr oundColor="#f0a0f0"
  }
  //子窗口访问父窗口方法
  function frameToPfun(ss){
  parent.testP("ssss");
  }
  //用于测试iframeB访问的方法
  function testBA(){
  alert("用于测试iframeB访问的方法")
  }
  
  
  
  b.html
  
  
  
  
  无标题文档
  
  
  二:测试子窗体间相互访问某方法或元素
  
  
  
  //子窗体B访问子窗体A的某元素
  function frameTframeDiv(){
  //parent.document.getElementById("frameA").content Window.document.getElementById("divooxx").style.col or="#a0c0f0";
  //parent.document.getElementById("frameA").content Window.document.getElementById("divooxx").style.bac kgroundColor="#000"
  var _bframe=parent.getIframe("frameA");//子窗体访问父窗体方法
  _bframe.getElementById("divooxx").style.color="#a0 c0f0";
  _bframe.getElementById("divooxx").style.background Color="#000";
  }
  //子窗体B访问子窗体A的某方法
  function frameTframeFun(){
  window.parent.frames["frameA"].testBA();
  }
  
  
  function getsFun(){
  return "sssssss";
  }
  //getFun()
  
  
  
分享到:
评论

相关推荐

    JS操作iframe里的dom(实例讲解)

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

    JS操作iframe里的dom

    NULL 博文链接:https://justcoding.iteye.com/blog/770225

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JS未跨域操作iframe里的DOM

    如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴下index.html和iframe引入的a.html内容。 index-> <iframe src=a.html frameborder=0 name=one id=iframeId></iframe> ...

    mydomtoimage.js

    dom-to-image.js 个人修改源码之后,支持嵌入iframe的网页截图。 导入js,直接调用shotScreen()函数即可。

    动态加载js、css等文件跨iframe实现

    1、动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js、css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式...

    iframe跨域问题

    iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法

    利用JS对iframe父子(内外)页面进行操作的方法教程

    本文主要给大家介绍了关于利用JS对iframe父子(内外)页面进行操作的方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 一、获取iframe里的内容 在开始之前,首先我们来看看如何获取iframe里的内容,获取...

    自己整理的一个JS函数库 AJAX dom隐藏显示 数据整理 只有12KB 压缩后5kb

    自己整理的一个JS函数库 AJAX dom隐藏显示 数据整理 只有12KB 压缩后5kb 使用方法 引入文件 然后就可以直接使用了 具体函数方法如下 /* $(id) 根据元素id返回对象 N(name, i) 根据元素name返回对象,可能会有多个...

    跨域修改iframe页面内容详解

    主站点内嵌代理页面, 并向代理页传递数据, 代理页根据主站点的数据对目标页的DOM进行操作.由于代理页与目标页同域, 所以代理页可以获取并操作目标页的document对象. 前提条件 需要将proxy.html放到与内嵌的iframe页...

    原生JS实现DOM加载完成马上执行JS代码的方法

    用原生JS我们经常使用[removed]事件来加载页面。...如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。 MSDN关于JSCRIPT的

    iframe-resizer-react:Iframe-Resizer的官方React界面

    iframe尺寸调整器React 该库是用于的官方React接口,该接口可自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度...

    JavaScript监听一个DOM元素大小变化

    1.需求场景 ...对于div的resize事件的监听,实现方式有很多,比如定时器检查,通过scroll事件等等,本文主要介绍通过iframe 元素来实现监听。 不过我们可以间接利用window的resize事件监听来实现对于

    iframe如何动态创建及释放其所占内存

    最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(RIA)应用程序,页面中大量调用iframe。后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,...* @param dom 创建iframe的容器,即在

    解决vue页面渲染但dom没渲染的操作

    主要介绍了解决vue页面渲染但dom没渲染的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    1、为ScriptManager添加脚本引用,不从ScriptResource.axd中加载MicrosoftAjax.js脚本,而是直接加载 <asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web....

    javascript中兼容主流浏览器的动态生成iframe方法

    以下代码在IE8下运行通过,在IE9中出错: 代码如下:document.createElement(‘<...错误提示:exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5) 思路分析:第一步:兼容IE9,firefox,Opera,Safar

    iframe-resizer:在页面链接,嵌套和多个iFrame中,支持大小相同的跨域iFrame,并支持窗口内容大小调整

    iFrame Resizer V4 通过该库,可以自动调整相同和跨域iFrame的高度和宽度的大小,以适合其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame调整为内容大小的高度和宽度。 适用...

Global site tag (gtag.js) - Google Analytics