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 事件的一些重要说明
Oct 25 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
vue地区选择组件教程详解
May 04 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使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js分页代码分享
2014/04/28 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript关于继承的用法汇总
2014/12/20 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python统计单词出现的次数
2018/04/04 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
小学毕业感言50字
2014/02/16 职场文书
团队精神的演讲稿
2014/05/14 职场文书
挂靠协议书
2015/01/27 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL