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

268 阅读 0 评论 177 点赞

我是靠谱客的博主斯文荔枝，最近开发中收集的这篇文章主要介绍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>  