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


Posted in Javascript onFebruary 17, 2014

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哥说:';

                tmp += document.frames['myFrame'].document.getElementById('test').value;

         }else{

                tmp = document.getElementById('myFrame').contentWindow.document.getElementById('test').value; 

         }

         alert(tmp);

    }

示例代码:
a.html页面中的代码
<html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>
                    javascript 获取iframe里页面中元素的值 测试
                </title>
           </head>
           <body>
                <iframe id="myFrame" src='b.html' style="width:300px;height: 50px;"></iframe>
                <input type="button" id="btn" onclick="getValue()" value="test" >
                <script type="text/javascript">
                        function getValue(){
                            var tmp = '';
                            if(document.frames){
                                    tmp += 'ie哥说:';
                                    tmp += document.frames['myFrame'].document.getElementById('test').value;
                            }else{
                                    tmp = document.getElementById('myFrame').contentWindow.document.getElementById('test').value; 
                            }
                            alert(tmp);
                        }
                </script>
            </body>
        </html>

b.html页面中的代码
       <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>
                    我是 iframe内的页面
                </title>
            </head>
            <body>
                <input type='text' id="test" value='欢迎访问:justflyhigh.com'>
            </body>
        </html> 
Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
JavaScript省市联动实现代码
Feb 15 #Javascript
js与运算符和或运算符的妙用
Feb 14 #Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 #Javascript
jquery中交替点击事件的实现代码
Feb 14 #Javascript
javascript获取form里的表单元素的示例代码
Feb 14 #Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 #Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 #Javascript
You might like
PHP 字符串分割和比较
2009/10/06 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
javascript引用对象的方法
2007/01/11 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
简单学习vue指令directive
2016/11/03 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python unittest模块用法实例分析
2018/05/25 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
介绍一下write命令
2012/09/24 面试题
实习老师离校感言
2014/02/03 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
年终晚会活动方案
2014/08/21 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技