快速获取/设置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的朋友都知道这个方法。在这里它可以发挥双倍的作用，如下例：

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

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

以上这篇快速获取/设置iframe内对象元素的几种js实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript 获取iframe里页面中元素值的方法

    IE方法:document.frames['myFrame'].document.getElementById('test').value; 火狐方法:document.getElementById('myFrame').contentWindow.document.getElementById('test').value; IE.火狐方法: 复制代码 代码如下: function getValue(){ var tmp = ''; if(document.frames){ tmp += 'ie

  • js取得html iframe中的元素和变量值

    上周想要取得iframe中的元素和js变量值,一直没取得,查资料得知: 不能用$(document).ready()方法,而是要用$("#iframeId").load()方法,待iframe加载完成,才能取得 取iframe中的js变量值: document.frames['x'].y 这样便可以. 哎,很简单的问题,搞了很长时间,不应该啊!

  • js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

    用JavaScript刷新上级页面和当前页面 复制代码 代码如下: <script type="text/javascript"> //刷新上级页面 //window.parent.main.document.location.reload(); //刷新当前页面 document.location.reload(); </script> 每个frame元素或者iframe元素就是一个框架,这个框架是一个窗口,在这个窗口中加载一个html文档.使用下面的几种方法

  • jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");

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

    JS获取/设置iframe内对象元素.文档的几种方法 1.IE专用(通过frames索引形象定位): 复制代码 代码如下: document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过iframe名称形象定位): 复制代码 代码如下: document.frames['iframe的name'].document.getElementById('元素的ID'); 以上方法,不仅对iframe适用,对frameset里的frame也同

  • 快速获取/设置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虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的.比如这个,它在同样支持下

  • 在 javascript 中如何快速获取数组指定位置的元素

    目录 前言 数组的 at() 方法 前言 在 JavaScript 中如果我们需要获取一个数组指定位置的元素,通常情况下,我们一般采用以下方法: 1.通过下标直接获取指定元素:arr[index], index 为非负数. let arr = [1, 4, 5, 8, 10] // 获取数组的第一个元素 let num1 = arr[0] // 获取数组的最后一个元素 let num2 = arr[arr.length - 1] // 获取数组的倒数第二个元素 let num3 = arr[ar

  • JavaScript获取表单内所有元素值的方法

    本文实例讲述了JavaScript获取表单内所有元素值的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.aspx"> First name: <input type="text" name="fname

  • Python获取当前页面内所有链接的四种方法对比分析

    本文实例讲述了Python获取当前页面内所有链接的四种方法.分享给大家供大家参考,具体如下: ''' 得到当前页面所有连接 ''' import requests import re from bs4 import BeautifulSoup from lxml import etree from selenium import webdriver url = 'http://www.testweb.com' r = requests.get(url) r.encoding = 'gb2312'

  • jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之. 然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html): <!DOCTYPE html> <html xmlns="htt

  • jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法

    本文实例讲述了jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法.分享给大家供大家参考,具体如下: 我们在使用EasyUI Tabs框架时,在框架最顶层的弹出窗体中需要操作当前Tab的iframe窗体内容或方法,这时候我们就可以使用以下方法来实现. 具体实现代码如下所示: function getTabWindow() { var curTabWin = null; var curTab = parent.$('#main-center').tabs('getSelected

  • jQuery获取与设置iframe高度的方法

    本文实例讲述了jQuery获取与设置iframe高度的方法.分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定. 1.首先获取到iframe中页面的高度: 复制代码 代码如下: var iframeHeight = $("#UpdateUserItem").contents().find("body").height(); 2.设置iframe的高度: $("#UpdateUserItem"

  • 快速获取Ajax通信对象的方法

    实例如下: function getXHR() { // 该方法用于获取Ajax通信对象 var xhr = null; if (window.XMLHttpRequest != null && window.XMLHttpRequest != undefined) { xhr = new XMLHttpRequest(); } else { / 兼容早期的IE浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } ret

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

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

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JQUERY 获取IFrame中对象及获取其父窗口中对象示例

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 在父窗口中获取iframe中的元素 格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 实例:$("#ifm").contents().find("#btnOk").click(); 在iframe中获取父窗口的元素 格式:$(

随机推荐