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函数重载解决方案分享
Feb 19 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
BootStrap中
Dec 10 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
js判断是否是手机页面
Mar 17 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
微信小程序背景音乐开发详解
Dec 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
解决Mac下使用python的坑
2019/08/13 Python
python实现小世界网络生成
2019/11/21 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
Python爬虫教程知识点总结
2020/10/19 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
解除施工合同协议书
2014/10/17 职场文书
薪资证明范本
2015/06/19 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python