我在一个页面嵌入了iframe，并且我想获得这个iframe页面某个元素的值。

在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     <code class="string">"frame1"</code> <code class="plain">id=</code><code class="string">"frame1"</code> <code class="plain"> src=</code><code class="string">"frm.html"</code> <code class="plain">frameborder=</code><code class="string">"1"</code> <code class="plain">height=</code><code class="string">"60"</code><code class="plain">>
02
03     iframe1中文本框的值："button" name="Submit" value="getValue" onclick="getValue()" />
04
05 <code class="string">"text/javascript"</code><code class="plain">></code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>06</code></td> <td class="content"><code class="keyword">function</code> <code class="plain">getValue()</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>07</code></td> <td class="content"><code class="plain">{</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>08</code></td> <td class="content"><code class="spaces">    </code><code class="keyword">var</code> <code class="plain">ofrm1 = document.getElementById(</code><code class="string">"frame1"</code><code class="plain">).document;    </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>09</code></td> <td class="content"><code class="spaces">    </code><code class="keyword">if</code> <code class="plain">(ofrm1==undefined)</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>10</code></td> <td class="content"><code class="spaces">    </code><code class="plain">{</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>11</code></td> <td class="content"><code class="spaces">        </code><code class="plain">ofrm1 = document.getElementById(</code><code class="string">"frame1"</code><code class="plain">).contentWindow.document;</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>12</code></td> <td class="content"><code class="spaces">        </code><code class="keyword">var</code> <code class="plain">ff = ofrm1.getElementById(</code><code class="string">"txt1"</code><code class="plain">).value;</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>13</code></td> <td class="content"><code class="spaces">        </code><code class="plain">alert(</code><code class="string">"firefox/chrome取值结果为:"</code> <code class="plain">+ ff);</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>14</code></td> <td class="content"><code class="spaces">    </code><code class="plain">}</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>15</code></td> <td class="content"><code class="spaces">    </code><code class="keyword">else</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>16</code></td> <td class="content"><code class="spaces">    </code><code class="plain">{</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>17</code></td> <td class="content"><code class="spaces">        </code><code class="keyword">var</code> <code class="plain">ie = document.frames[</code><code class="string">"frame1"</code><code class="plain">].document.getElementById(</code><code class="string">"txt1"</code><code class="plain">).value;</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>18</code></td> <td class="content"><code class="spaces">        </code><code class="plain">alert(</code><code class="string">"ie取值结果为:"</code> <code class="plain">+ ie);</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>19</code></td> <td class="content"><code class="spaces">    </code><code class="plain">} </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>20</code></td> <td class="content"><code class="plain">}</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>21</code></td> <td class="content"><code class="plain">

iframe页面代码：

01

02

03

04

05

06

07	"txt1" name="txt1" type="text" value="欢迎访问www.nowamagic.net" />

08

09

10	function test(){          if(document.all){    //IE代码    alert(document.frames["MyIFrame"].document.getElementById("qsn_category").value); }else{   //其他 }