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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
关于时间计算的结总
2006/12/06 PHP
php 破解防盗链图片函数
2008/12/09 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
javascript中this的四种用法
2015/05/11 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
js实现星星打分效果
2020/07/05 Javascript
python设置检查点简单实现代码
2014/07/01 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python中的引用知识点总结
2019/05/20 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
逻辑链路控制协议
2016/10/01 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
储备店长岗位职责
2015/04/14 职场文书
交通安全教育心得体会
2016/01/15 职场文书
Python Socket编程详解
2021/04/25 Python
Python 绘制多因子柱状图
2022/05/11 Python