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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
前端性能优化及技巧
May 06 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
几种响应式文字详解
2017/05/19 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
vue滚动tab跟随切换效果
2020/06/29 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python获取指定时间差的时间实例详解
2017/04/11 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python用Jira库来操作Jira
2020/12/28 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
高二生物教学反思
2014/01/27 职场文书
高效课堂标语
2014/06/26 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
财产分割协议书
2016/03/22 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
A22国内电台短波广播频率表
2022/05/10 无线电