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 面向对象(创建对象)
Mar 30 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
vue中使用rem布局代码详解
Oct 30 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
C#面试题
2016/05/06 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
买房委托公证书
2014/04/08 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
会议接待欢迎标语
2014/10/08 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
JavaScript控制台的更多功能
2021/04/28 Javascript