`

获取/设置IFRAME内对象元素的几种JS方法

 
阅读更多

1。IE专用(通过frames索引形象定位):document.frames[i].document.getElementById('元素的ID');
2。IE专用(通过IFRAME名称形象定位):document.frames['iframe的name'].document.getElementById('元素的ID');

  以上方法,不仅对IFRAME适用,对FRAMESET里的FRAME也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。

3。通用方法:document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
  注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表FRAME和IFRAME内部的窗口对象。

  但是,很明显,这种写法非常要命,太长了。如果要操作一系列里面的元素,这样写起来,实在够受的,就算用复制粘贴大法,眼睛看起来也是个问题。

4。通用方法的简写:

  对document.getElementById定义一个短名称,稍微熟悉JS的朋友都知道这个方法。在这里它可以发挥双倍的作用,如下例:

[javascript]view plaincopy
  1. var$id=document.getElementById;
  2. $Id('iframe的ID').contentWindow.$Id('元素的ID')//这样就得到了要取的对象

在这一点上,我还是喜欢IE的做法,比较呵护。因为微软不是一个单独的浏览器开发商,它本身也要大量地编写开发HTML/ASP等文档,所以比较能够做到这一点。而其它的浏览器开发商,基本只是站在一个浏览器的立场,把最基本的链路走通就完事了,很少站在开发者立场去设计出一些类似这样既简便又不失语义化的捷径来。很多人动辄说它们“标准”,在有些地方固然有理,但在有些地方,这种标准也不过是一种冷漠。

分享到:
评论

相关推荐

    快速获取/设置iframe内对象元素的几种js实现方法

    在本文中,我们将详细介绍几种快速获取或设置iframe内部对象元素的方法。 首先,考虑到不同浏览器的兼容性,IE浏览器与标准浏览器之间存在差异。IE浏览器支持使用document.frames集合来访问iframe内部的文档,这...

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

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

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

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

    使用jquery/js获取iframe父子级、同级获取元素的方法

    如果iframe设置了name属性,可以通过window.frames数组来获取iframe中的document对象。一旦获取到iframe的document对象,就可以使用document.getElementById()方法来获取具体的控件元素,然后对其进行操作。例如: ...

    解析Jquery取得iframe中元素的几种方法

    ### jQuery取得iframe中元素的几种方法 - **获取iframe的body内容**:使用`$(document.getElementById('iframeId').contentWindow.document.body).html()`可以获取到iframe中body元素的HTML内容。 - **通过iframe...

    js实现ifram取父窗口URL地址的方法

    获取父窗口URL地址通常有几种方法,比如使用document.referrer属性或window.location属性。document.referrer属性返回的是链接到当前页面的那个页面的URL。但是,当用户直接通过地址栏输入URL或者书签访问页面时,...

    获取iframe值 文件下载

    ### 获取iframe值与文件下载知识点详解 #### 一、引言 在Web开发过程中,`iframe`(Inline Frame)是一种非常实用的技术,它允许在当前页面内嵌入另一个HTML文档,实现网页局部刷新或者加载其他网页内容的效果。...

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

    // 获取IFrame的文档对象 var doc = iframe.contentWindow.document; // 引入打印专有CSS样式,此处为示例,应根据实际项目修改 doc.write("<LINK rel='stylesheet' type='text/css' href='css/print.css'>");...

    完美解决iframe跨域问题

    3. **iframe跨域问题**:当iframe加载的页面与包含它的页面不在同一个域时,就会出现跨域问题,导致无法直接通过JavaScript进行通信,如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...

    iframe框架使用(完美版)

    1. **JavaScript监听滚动事件**:通过监听iframe的`load`事件,当内容加载完成后,获取iframe的contentWindow或contentDocument对象,计算其高度并赋值给iframe的height属性。 2. **使用postMessage通信**:如果...

    jquery 操作iframe的几种方法总结

    总之,jQuery为开发者提供了便捷的方式来操作`iframe`,包括获取和设置内容、选择和修改元素、以及触发事件等。合理运用这些技巧,可以有效提高开发效率,实现复杂的页面交互。但同时,要注意浏览器兼容性和同源策略...

    iFrame 自动调整高度

    实现`<iframe>`自动调整高度的核心思路是在`<iframe>`内容变化后,获取其内部文档的实际高度,并设置为`<iframe>`的高度。具体来说,可以采用以下两种方法: 1. **通过JavaScript动态调整**: - 监听`<iframe>`的`...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上。 以下是一个基本的实现思路: 1. 创建`iframe`元素,并设置其初始高度,例如一...

    执行iframe中的javascript方法

    // 获取iframe元素 var iframe = document.getElementById("iframeId"); // 访问iframe内的window对象 var iframeWindow = iframe.contentWindow; // 调用iframe内的函数 iframeWindow.functionName(); ``` **注意...

    iframe应用

    通过以上几种方式,可以实现父窗体与子窗体之间的有效通信,这对于复杂页面的设计和实现具有重要意义。需要注意的是,在实际开发过程中,应当遵循浏览器的安全策略,并考虑到跨域限制等因素,确保通信的安全性和稳定...

    JS动态修改iframe高度和宽度的方法

    关于JavaScript操作iframe属性的技巧,除了直接修改其height和width属性外,还可以通过以下几种方式来控制iframe尺寸: 1. 使用CSS样式直接控制iframe尺寸:可以在内联样式或外部样式表中对iframe应用样式,例如...

    iframe与主框架跨域相互访问

    而`iframe`内的页面也可以通过`parent`对象访问到主框架的元素或函数: ```javascript var parentElement = parent.document.getElementById('someParentElement'); parent.someFunction(); ``` 跨域访问: 跨域...

    jQuery取得iframe中元素的常用方法详解

    这段代码首先通过document.frames方法获取名为iframename的iframe对象,然后通过document属性访问其内部的document对象,最后使用jQuery选择器取得ID为objid的元素。 在jQuery 1.9版本之后,也可以使用contents()...

    JS修改iframe页面背景颜色的方法

    1. 获取iframe元素:要修改iframe中的内容,首先需要通过JavaScript获取到iframe元素。在实例代码中,是通过`document.getElementById("myframe")`获取了具有id为"myframe"的iframe元素。 2. 检测并访问iframe的...

Global site tag (gtag.js) - Google Analytics