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 相关文章推荐
popdiv
Jul 14 Javascript
prototype1.4中文手册
Sep 22 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JavaScript 空间坐标的使用
Aug 19 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
twig里使用js变量的方法
2016/02/05 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python 内置函数complex详解
2016/10/23 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python pygame实现2048游戏
2018/11/20 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
乡镇干部先进事迹材料
2014/02/03 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
升学宴祝酒词
2015/08/11 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Python超详细分步解析随机漫步
2022/03/17 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL