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中的Split使用方法与技巧
Mar 09 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
php判断访问IP的方法
2015/06/19 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
复选框全选与全不选操作实现思路
2013/08/18 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
详解vue-cli中配置sass
2017/06/21 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python字符串排序方法
2014/08/29 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
基于opencv实现简单画板功能
2020/08/02 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python LMDB库的使用示例
2021/02/14 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
农贸市场管理制度
2014/01/31 职场文书
教师专业自荐书范文
2014/02/10 职场文书
财务情况说明书范文
2014/05/06 职场文书
和睦家庭事迹
2014/05/14 职场文书
事业单位考核材料
2014/05/21 职场文书
教师工作能力自我评价
2015/03/04 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android