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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
Nuxt的路由配置和参数传递方式
Nov 06 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
javascript处理table表格的代码
2010/12/06 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Django实现单用户登录的方法示例
2019/03/28 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python如何将字符串转换为日期
2020/07/31 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
学生喝酒检讨书
2014/02/06 职场文书
运动会演讲稿
2014/05/07 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
检讨书之工作不认真
2019/08/14 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
MYSQL 表的全面总结
2021/11/11 MySQL
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android