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 滚轮事件使用说明
Mar 07 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 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
PHP的中问验证码
2006/11/25 PHP
js代码实现微博导航栏
2015/07/30 PHP
nginx下安装php7+php5
2016/07/31 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
浅析JavaScript动画
2015/06/10 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
python中的格式化输出用法总结
2016/07/28 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python学生信息管理系统(完整版)
2020/04/05 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
python如何实现word批量转HTML
2020/09/30 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
航空大学应届生求职信
2013/11/10 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
美术课外活动总结
2014/07/08 职场文书
干部个人对照检查材料
2014/08/25 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
反邪教学习心得体会
2016/01/15 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
MySQL transaction事务安全示例讲解
2022/06/21 MySQL