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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JS中substring与substr的用法
Nov 16 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
关于layui flow loading占位图的实现方法
Sep 21 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
Terran热键控制
2020/03/14 星际争霸
php下的权限算法的实现
2007/04/28 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
几行js代码实现自适应
2017/02/24 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python爬取指定微信公众号文章
2018/12/20 Python
详解Python的循环结构知识点
2019/05/20 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
迟到检讨书5000字
2014/01/31 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
贷款承诺书
2015/01/20 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
Java无向树分析 实现最小高度树
2022/04/09 Javascript
python热力图实现的完整实例
2022/06/25 Python