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> 

相关文章

  • 符合W3C Web标准的图片连续无间隙水平滚动

    符合W3C Web标准的图片连续无间隙水平滚动

    很久以前就有这个问题,总是找不到通用的,或比较简单的“图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准”
    2008-06-06
  • JavaScript Array实例方法flat的实现

    JavaScript Array实例方法flat的实现

    flat() 方法用于将一个嵌套多层的数组进行扁平,返回新数组,它不会改变原始数组, flat 方法在处理多维数组时非常有用,它可以让数组操作变得更加灵活和简洁,本文给大家介绍了JavaScript Array实例方法flat的实现,需要的朋友可以参考下
    2024-03-03
  • webpack构建的详细流程探底

    webpack构建的详细流程探底

    目前,几乎所有业务的开发构建都会用到 webpack 。所以下面这篇文章主要给大家介绍了关于webpack构建的详细流程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2018-01-01
  • 基于jquery的高性能td和input切换并可修改内容实现代码

    基于jquery的高性能td和input切换并可修改内容实现代码

    在实际工作中,我们会碰到这样一个情况。在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下
    2011-01-01
  • js实现图片左右滚动效果

    js实现图片左右滚动效果

    本文主要介绍了js实现图片左右滚动效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 小程序实现锚点滑动效果

    小程序实现锚点滑动效果

    这篇文章主要为大家详细介绍了小程序实现锚点滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • PHP7新特性简述

    PHP7新特性简述

    本文通过实例给大家介绍了PHP7新特性的相关知识,需要的朋友参考下吧
    2017-06-06
  • 12种JavaScript常用的MVC框架比较分析

    12种JavaScript常用的MVC框架比较分析

    这篇文章主要介绍了12种JavaScript常用的MVC框架比较分析,以独特的视角分析了12中常见的JavaScript MVC框架各种优缺点,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • js限制文本框只能输入中文的方法

    js限制文本框只能输入中文的方法

    这篇文章主要介绍了js限制文本框只能输入中文的方法,涉及javascript正则匹配及鼠标事件的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • JS通过调用微信API实现微信支付功能的方法示例

    JS通过调用微信API实现微信支付功能的方法示例

    这篇文章主要介绍了JS通过调用微信API实现微信支付功能的方法,结合具体实例形式分析了javascript微信支付接口的调用方法与相关注意事项,需要的朋友可以参考下
    2017-06-06

最新评论