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实现的一个随机点名功能
Aug 26 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 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
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
运输服务质量承诺书
2014/03/27 职场文书
小学评语大全
2014/04/22 职场文书
给老婆的保证书范文
2014/04/28 职场文书
婚纱店策划方案
2014/05/22 职场文书
庆祝儿童节标语
2014/10/09 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
亮剑精神观后感
2015/06/05 职场文书
校运会宣传稿大全
2015/07/23 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Nginx的gzip相关介绍
2022/05/11 Servers