`
lishumingwm163.com
  • 浏览: 337943 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

js 操作iframe

    博客分类:
  • js
阅读更多

父级窗口操作iframe里的dom

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

相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。

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是索引值)也支持所有主流浏览器

这个可以看实例:http://www.css88.com/demo/iframe-correspond/index-test.html

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

二、iframe里的js操作父级窗口的dom

iframe里的js要操作父级窗口的dom,必须搞懂几个对象:

parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),

top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),

self是当前窗口(等价window),

opener是用open方法打开当前窗口的那个窗口;

这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:

parent.document.getElementById(“dom ID”);

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

————————————————

查看一下JS操作iframe里的dom的demo:http://www.css88.com/demo/iframe-correspond/

虽然iframe在现在WEB开发中越来越少用到了,但是iframe还有很多值得使用的地方,比如使用iframe解决跨域问题.关于iframe还有很多东西要学习,比如iframe自适应高度,使用iframe解决跨域问题,iframe加载问题,iframe加载性能问题等等,还有很多东西要学习,

分享到:
评论

相关推荐

    js操作iframe的一些知识

    ### JS操作Iframe的知识点详解 #### 一、概述 在网页开发中,经常会遇到需要通过JavaScript来控制或操作Iframe元素的情况。Iframe(Inline Frame)是一种可以在当前页面内嵌入其他页面的方式,常用于广告展示、...

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

    在JavaScript中,操作`iframe`内的DOM元素是常见的需求,特别是在构建复杂的网页应用时。`iframe`(Inline Frame)是一种可以在HTML文档中嵌入另一个HTML文档的元素,它允许我们实现页面分隔、加载外部资源或者创建...

    JS操作iframe里的dom

    总结来说,JavaScript操作iframe中的DOM涉及获取iframe引用、访问其内容窗口或文档,以及遵循同源策略。对于跨域iframe,可以利用`postMessage`和`message`事件进行通信。理解和掌握这些技巧对于开发复杂的网页应用...

    JavaScript操作iframe父窗口和子窗口例子

    JavaScript操作iframe父窗口和子窗口是一种常见的Web开发技术,它涉及到网页交互和页面通信。在Web应用程序中,iframe(Inline Frame)常用于嵌入其他网页或者实现页面的局部刷新,而父窗口与子窗口之间的通信则能...

    JS页面跳转和js对iframe进行页面跳转、刷新

    本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和刷新。 ### 一、JS页面跳转方式 #### 1. `window.location.href`方式 这是最常见的页面跳转方法,通过改变`window.location.href`...

    js+iframe

    js 操作iframe

    JS去除iframe滚动条的方法

    3. 如何通过JavaScript操作iframe的属性来去除滚动条。 4. 考虑不同浏览器对于`scrolling`属性的支持情况以及可能出现的兼容性问题。 最后,给定文件还提到了一点重要的内容,即在实际应用去除滚动条功能时,可能...

    js操作iframe的一些方法介绍

    本文介绍了JavaScript操作iframe元素的方法,包括获取iframe的window和document对象、获取父页面的window对象以及在iframe中触发onload事件的技巧。接下来将详细展开这些知识点。 首先,获取iframe的window对象,这...

    js调用-嵌入iframe

    JavaScript可以通过DOM(Document Object Model)来操作IFrame,包括获取IFrame、修改其属性、以及与IFrame内的页面进行通信。 - **获取IFrame**:使用`document.getElementById`或`document.querySelector`等方法...

    解决JS跨域访问IFrame的解决方案

    当一个页面试图通过IFrame加载不同源的网页时,由于同源策略的存在,我们不能直接获取或操作IFrame中的内容。 面对这样的问题,我们可以采用以下几种跨域解决方案: 1. **CORS(Cross-Origin Resource Sharing)**...

    javascript经典特效---Iframe页面的滚动.rar

    - 不同浏览器对JavaScript操作Iframe的支持程度不同,尤其是涉及到跨域操作时,需考虑IE、Firefox、Chrome、Safari等浏览器的差异。 - 使用`window.postMessage`进行跨域通信,可以实现更灵活的Iframe页面交互,但...

    js调用iframe实现打印页面内容的方法

    jQuery是一个强大的JavaScript库,它提供了一个简洁的API来简化DOM操作、事件处理等。使用jQuery,可以轻松实现区域打印功能。具体步骤如下: 1. 引入jQuery库和对应的打印插件文件。 2. 使用jQuery选择器和事件...

    js处理iframe的系列问题

    利用JavaScript可以实现对`iframe`中的元素进行操作,例如读取或修改其中的内容。下面将详细介绍如何通过JavaScript来处理`iframe`中的各种问题。 #### 1. 访问`iframe`内部元素 根据提供的代码片段,“获取父页面...

    javascript写的可拖动的iframe

    然后,我们关注到"ifrWin.js",这是一个JavaScript文件,实现了iframe的拖动逻辑。在这个文件中,我们需要创建一个类来处理iframe的拖动事件。这个类可能包含初始化方法、事件监听器(如`mousedown`、`mousemove`和`...

    JS获取并操作iframe中元素的方法

    JS获取/设置iframe内对象元素、文档的几种方法 1、IE专用(通过frames索引形象定位): 代码如下: document.frames[i].document.getElementById(‘元素的ID’); 2、IE专用(通过iframe名称形象定位): 代码如下: ...

    JS获取iframe内容【简化版】

    - JavaScript可以通过DOM(Document Object Model)操作iframe元素。 - 主要通过`window.frames`或者`document.getElementById('iframeId').contentWindow`来访问iframe内的窗口对象。 - 可以通过`window.frames...

    js 操作 frameset frame iframe对象

    JS 操作 Frameset、Frame、Iframe 对象 Frameset、Frame、Iframe 是 HTML 中的框架编程概念,它们可以将一个 HTML 页面分割成多个独立的区域,每个区域可以显示一个独立的 HTML 页面。JS 操作 Frameset、Frame、...

    基于js的iframe 可关闭tab标签组件使用方法

    3. **JavaScript代码**:首先引入`jquery.js`库,它提供了一套强大的DOM操作和事件处理函数,简化了JavaScript编程。然后,编写JavaScript代码来实现tab切换和iframe加载。 ```javascript $(document).ready...

    js操作iframe父子窗体示例

    关于JavaScript操作iframe父子窗体的知识点,本篇内容主要涉及通过JavaScript代码实现父窗口与iframe子窗口间数据的互相访问,以及如何控制子窗口中的内容。以下是详细的内容说明: 1. 父窗口与iframe的交互: 在父...

Global site tag (gtag.js) - Google Analytics