原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

我不是女神ヾ 2023-10-11 15:28 20阅读 0赞

用原生js在父页面获取iframe子页面的元素，以及在子页面获取父页面元素，这是平时经常会用到的方法，这里写一个例子来总结下：

**1、父页面（demo.html）**，在父页面修改子页面div的背景色为灰色，原来为红色：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"&gt;</code> <code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;demo主页面&lt;/</code><code>title</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = function(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var _iframe = document.getElementById('iframeId').contentWindow;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var _div =_iframe.document.getElementById('objId');</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>_div.style.backgroundColor = '#ccc';</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> &nbsp; <code>&lt;</code><code>body</code><code>&gt;</code> &nbsp; <code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>'parDiv'</code><code>&gt;父页面&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;</code><code>iframe</code> <code>src</code><code>=</code><code>"demo-iframe.html"</code> <code>id</code><code>=</code><code>"iframeId"</code> <code>height</code><code>=</code><code>"150"</code> <code>width</code><code>=</code><code>"150"</code><code>&gt;&lt;/</code><code>iframe</code><code>&gt; </code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**2、子页面（demo-iframe.html）**，在子页面修改父页面div的字体颜色为红色，原来为黑色：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>&lt;!DOCTYPE html PUBLIC </code><code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code> <code>"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"</code><code>&gt;</code> <code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code> <code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code> <code>/&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;子页面demo13-iframe.html&lt;/title&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>_iframe = window.parent;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>_div =_iframe.document.getElementById(</code><code>'parDiv'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>_div.style.color = </code><code>'red'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code> <code>&lt;/head&gt;</code> &nbsp; <code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div id=</code><code>'objId'</code> <code>style=</code><code>'width:100px;height:100px;background-color:red;'</code><code>&gt;子页面&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

3、效果图：

（1）没有加入js时的效果图：

![5ea39108bb369e81dad525b2bf3a5ec2.png][]

（2）加入js后的效果图：

![88a6ee4bded3e972489452ccb190b220.png][]

[5ea39108bb369e81dad525b2bf3a5ec2.png]: https://img-blog.csdnimg.cn/img_convert/5ea39108bb369e81dad525b2bf3a5ec2.png
[88a6ee4bded3e972489452ccb190b220.png]: https://img-blog.csdnimg.cn/img_convert/88a6ee4bded3e972489452ccb190b220.png