javascript 获取iframe里页面中元素值的方法

 更新时间:2014年02月17日 08:51:42   作者:  
本篇文章主要是对javascript获取iframe里页面中元素值的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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中SetInterval与setTimeout的定时器用法

    javascript中SetInterval与setTimeout的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
    2015-08-08
  • javaScript中push函数用法实例分析

    javaScript中push函数用法实例分析

    这篇文章主要介绍了javaScript中push函数用法,较为详细的分析了javascript中push函数的功能、定义及使用技巧,需要的朋友可以参考下
    2015-06-06
  • uniapp movable-area应用

    uniapp movable-area应用

    这篇文章主要为大家介绍了uniapp movable-area应用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • js仿QQ邮箱收件人选择与搜索功能

    js仿QQ邮箱收件人选择与搜索功能

    这篇文章主要为大家详细介绍了js仿QQ邮箱收件人选择与搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 自动更新作用

    自动更新作用

    自动更新作用...
    2006-10-10
  • 3款实用的在线JS代码工具(国外)

    3款实用的在线JS代码工具(国外)

    本文为大家推荐3款非常实用的在线JS代码工具,可以帮助你方便地处理JavaScript或jQuery代码
    2012-03-03
  • 比较详细的关于javascript中void(0)的具体含义解释

    比较详细的关于javascript中void(0)的具体含义解释

    比较详细的关于javascript中void(0)的具体含义解释...
    2007-08-08
  • 编写针对IE的JS代码两种编写方法

    编写针对IE的JS代码两种编写方法

    有些时候我们需要针对某些IE下的兼容性写单独的JS处理代码,这只是简简单单为了兼容行啊,有多种方法可以实现,小编整理了一下,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-01-01
  • 微信小程序云开发修改云数据库中的数据方法

    微信小程序云开发修改云数据库中的数据方法

    这篇文章主要介绍了微信小程序云开发修改云数据库中的数据方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javascript深拷贝的原理与实现方法分析

    javascript深拷贝的原理与实现方法分析

    这篇文章主要介绍了javascript深拷贝的原理与实现方法,简单分析了值传递和引用传递的原理与实现方法,并结合实例形式给出了深拷贝的具体实现技巧,需要的朋友可以参考下
    2017-04-04

最新评论