zoukankan      html  css  js  c++  java
  • iframe的Dom操作

      我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理。也就是说我们需要在父级页面中操作子页面(iframe)的dom。

    我查找了一些资料,简单做了一些整理。

      主要分成两个方向来说明: 父级页面操作子页面 和 子页面 操作父级页面。

    一、父级页面操作子页面

      这里面存在一个问题:两个页面不能跨域(小域名也要相同)。iframe操作是有跨域限制的,试想以下我的页面的iframe引用了竞争对手的页面,但是我用父级页面做一些压力攻击。岂不是非诚的不安全。但是在我的需求中,这不是问题父级页面和子集页面都是东家的。

    jquery:

    $('#iframe').contents().find('选择器')

     原生JS:

      JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器

    ie6和ie7还可以使用document.frames[“iframe Name”]或者document.frames[“iframe ID”]来获取相当于contentWindow属性,而firefox和chrome并不支持这些document.frames[“iframe Name”]或者document.frames[“iframe ID”],但是window.frames[“iframe Name”]或window.frames[index](index是索引值)也支持所有主流浏览器

      我们知道document对象是window对象的一个子对象,所以我们可以通过contentWindow.document来获取iframe的document对象,相当于contentDocument属性。

    document.getElementById(“iframe ID”).contentWindow.document

    、子页面(iframe)操作父级页面

    jQuery: 

    $(window.parent.document).find("选择器"); 

    原生JS:

    parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口(等价window),opener是用open方法打开当前窗口的那个窗口;

    parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;

    parent.document.getElementById(“dom ID”)

      关于iframe的dom操作,我参考了以下文章,受益匪浅《JS操作iframe里的dom》 、《用JS访问操作iframe里的dom》和 《用JavaScript在IE和Firefox下进行iframe的DOM操作

          

        

        

      

  • 相关阅读:
    Office 2016 安装你所必须要注意的事项
    JetBrains软件开发框架下的类似于“.IntelliJIdea2018.1”的配置文件夹的移动
    “microsoft ace oledb 12.0 未注册”疑云
    WebStorm添加多个项目到当前工程目录
    SVN入门教程
    FreeMarker 快速入门
    ajax详解
    基于JavaMail的Java邮件发送:简单邮件发送
    css 文件上传按钮美化
    chrome开发者工具的使用
  • 原文地址:https://www.cnblogs.com/webARM/p/4664008.html
Copyright © 2011-2022 走看看