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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
phpinfo的知识点总结
2019/10/10 PHP
jquery 上下滚动广告
2009/06/17 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python字典一键多值实例代码分享
2019/06/14 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
材料加工硕士生求职信
2013/10/10 职场文书
数控技术专业推荐信
2013/11/01 职场文书
珠宝店促销方案
2014/03/21 职场文书
和解协议书
2014/04/16 职场文书
初中新生军训方案
2014/05/13 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers