您的位置：首页 > 其它

如何获取iframe DOM的值

2014-10-19 22:03 176 查看
在Web开发时，很多时候会遇到一个问题。我在一个页面嵌入了iframe，并且我想获得这个iframe页面某个元素的值。那么该如何实现这个需求呢？

先来看下演示：


效果演示

iframe1中文本框的值：

在IE下操作IFrame内容的代码：

1
document.frames[
"MyIFrame"
].document.getElementById(
"s"
).style.color=
"blue"
;
但是这在Firefox下无效。所以，想到在Firefox下用FireBug来调试。经过调试发现在Firefox下可用以下代码来实现：

1
document.getElementById(
"MyIFrame"
).contentDocument.getElementById(
"s"
).style.color=
"blue"
;
demo代码：

01
<div><iframe name=
"frame1"
 
id=
"frame1"
 
src=
"frm.html"
 
frameborder=
"1"
height=
"60"
></iframe></div>
02
 
03
<p>iframe1中文本框的值：<input type=
"button"
 
name=
"Submit"
value=
"getValue"
 
onclick=
"getValue()"
 
/></p>
04
 
05
<script type=
"text/javascript"
>
06
function
 
getValue()
07
{
08
var
 
ofrm1 = document.getElementById(
"frame1"
).document; 
09
if
 
(ofrm1==undefined)
10
{
11
ofrm1 = document.getElementById(
"frame1"
).contentWindow.document;
12
var
 
ff = ofrm1.getElementById(
"txt1"
).value;
13
alert(
"firefox/chrome取值结果为:"
 
+ ff);
14
}
15
else
16
{
17
var
 
ie = document.frames[
"frame1"
].document.getElementById(
"txt1"
).value;
18
alert(
"ie取值结果为:"
 
+ ie);
19
}
20
}
21
</script>
iframe页面代码：

view source

print?

01
<html>
02
<head>
03
<title>框架内页</title>
04
</head>
05
<body>
06
<div>
07
<input id=
"txt1"
 
name=
"txt1"
 
type=
"text"
 
value=
"欢迎访问www.nowamagic.net"
 
/>
08
</div>
09
</body>
10
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航