在Web开发时,很多时候会遇到一个问题。我在一个页面嵌入了iframe,并且我想获得这个iframe页面某个元素的值。那么该如何实现这个需求呢?
先来看下演示:
效果演示
iframe1中文本框的值:
在IE下操作IFrame内容的代码:
1 |
document.frames[ "MyIFrame" ].document.getElementById( "s" ).style.color= "blue" ; |
但是这在Firefox下无效。所以,想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现:
1 |
document.getElementById( "MyIFrame" ).contentDocument.getElementById( "s" ).style.color= "blue" ; |
demo代码:
01 |
<div><iframe name= "frame1" id= "frame1" src= "frm.html" frameborder= "1" height= "60" ></iframe></div> |
03 |
<p>iframe1中文本框的值:<input type= "button" name= "Submit" value= "getValue" onclick= "getValue()" /></p> |
05 |
<script type= "text/javascript" > |
08 |
var ofrm1 = document.getElementById( "frame1" ).document; |
11 |
ofrm1 = document.getElementById( "frame1" ).contentWindow.document; |
12 |
var ff = ofrm1.getElementById( "txt1" ).value; |
13 |
alert( "firefox/chrome取值结果为:" + ff); |
17 |
var ie = document.frames[ "frame1" ].document.getElementById( "txt1" ).value; |
18 |
alert( "ie取值结果为:" + ie); |
iframe页面代码:
07 |
<input id= "txt1" name= "txt1" type= "text" value= "欢迎访问www.nowamagic.net" /> |
- Jquery 方式获取 iframe Dom元素
Jquery 方式获取 iframe Dom元素 測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素& ...
- 页面中获取 iframe 中的值
3.页面中获取 iframe 中的值 var obj=document.getElementsByClassName(".ke-edit-iframe").contentWindo ...
- 父页面内获取获取iframe内的变量或者是获取iframe内的值
前提:页面不可跨域访问,必须同一域名下,否则返回值为空 父页面 <!DOCTYPE html> <html lang="en"> <head> ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- 在iframe中获取本iframe DOM引用
window.frameElement 获取本iframe DOM window.frameElement.contentDocument.getElementById('id') 获取这个ifram ...
- 页面间(窗口间)的取值赋值及获取iframe下的window对象
①同一个窗口中,获取某个iframe的信息 <body> <iframe id="PAID" name="PA" src="Item ...
- jquery获取iframe中的dom对象
父窗口中操作iframe:$(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作 ...
- javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...
- vue3 template refs dom的引用、组件的引用、获取子组件的值
介绍 通过 ref() 还可以引用页面上的元素或组件. DOM 的引用 <template> <div> <h3 ref="h3Ref">Tem ...
随机推荐
- 如何用Python做自动化特征工程
机器学习的模型训练越来越自动化,但特征工程还是一个漫长的手动过程,依赖于专业的领域知识,直觉和数据处理.而特征选取恰恰是机器学习重要的先期步骤,虽然不如模型训练那样能产生直接可用的结果.本文作者将使用 ...
- POJ2762 单向连通图(缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 19552 ...
- Kubernetes-Envoy(一种全新的Ingress实现方式)
Ingress 在讲Envoy之前,先介绍一下Kubernetes中Service的表现形式为IP:Port,及工作在Ingress:TCP/IP层.而对于基于HTTP的服务来说,不同的URL地址经常 ...
- Django的命令操作,python
忘记时候,查看命令用:python manage.py 1 建立项目的命令: django-admin.py startproject project_name 2 在项目的目录下建立app: dja ...
- 2,PyAudio 实现录音 自动化交互实现问答
Python 很强大其原因就是因为它庞大的三方库 , 资源是非常的丰富 , 当然也不会缺少关于音频的库 关于音频, PyAudio 这个库, 可以实现开启麦克风录音, 可以播放音频文件等等,此刻我们不 ...
- idea 常用设置
1.修改为Eclipse快捷键 File -> Settings -> Keymap => Keymaps改为 Eclipse copy 2.显示行号: File -> S ...
- [Windows]_[C/C++]_[如何调试子进程]
场景 1.VC++ 的程序A在启动程序C时, 如果需要调试程序C的话一般有两种, 一种是通过菜单 调试->附加到进程的方式来调试程序, 缺点就是这个进程必须先启动, 但是一启动的话有可能就执行了 ...
- itop-4412开发板使用第一篇-信号量的学习使用
1. 本次基于itop-4412研究下Linux信号量的使用方法. 2. 创建信号量的函数,信号量的头文件在那个路径?编译应用程序的话,头文件有3个路径,内核源码头文件,交叉编译器头文件,ubuntu ...
- 用Kettle的一套流程完成对整个数据库迁移 费元星
原地址 :http://ainidehsj.iteye.com/blog/1735434 需求: 1.你是否遇到了需要将mysql数据库中的所有表与数据迁移到Oracle. 2.你是否还在使用kett ...
- 什么鬼,又不知道怎么命名class了
什么鬼,又不知道怎么命名class了 2015/10/25 · CSS · class 分享到:5 原文出处: 结一(@结一w3cplus) 相信写css的人都会遇到下面的问题: 糟糕,怎么命名 ...