原生js取得iframe中dom元素--父子頁面互相取得對方dom元素的方法-js教程-PHP中文網

首頁

web前端

js教程

原生js取得iframe中dom元素--父子頁面互相取得對方dom元素的方法

高洛峰

Feb 06, 2017 am 09:33 AM

用原生js在父頁面取得iframe子頁面的元素，以及在子頁面取得父頁元素，這是平時常會用到的方法，這裡寫一個例子來總結下：

1、父頁（demo. html），在父親頁面修改子頁面div的背景色為灰色，原來是紅色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo主页面</title>
    <script type="text/javascript">
    window.onload = function(){
        var _iframe = document.getElementById(&#39;iframeId&#39;).contentWindow;
        var _div =_iframe.document.getElementById(&#39;objId&#39;);
        _div.style.backgroundColor = &#39;#ccc&#39;;
    }
     
    </script>
</head>
 
<body>
 
<div id=&#39;parDiv&#39;>父页面</div>
<iframe src="demo-iframe.html" id="iframeId" height="150" width="150"></iframe> 
</body>
</html>

2、子頁面（demo-iframe.html），在子頁面修改父親頁面div的字體顏色為紅色，原來為黑色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>子页面demo13-iframe.html</title>
    <script type="text/javascript">
    window.onload = function(){
        var _iframe = window.parent;
        var _div =_iframe.document.getElementById(&#39;parDiv&#39;);
        _div.style.color = &#39;red&#39;;
    }
    </script>
</head>
 
<body>
    <div id=&#39;objId&#39; style=&#39;width:100px;height:100px;background-color:red;&#39;>子页面</div>
</body>
</html>

3、效果圖：

（1）沒有加入js時的效果圖：

原生js取得iframe中dom元素--父子頁面互相取得對方dom元素的方法

（2）加入js後的效果圖：

中dom元素--父子頁面互相取得對方dom元素的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

原生js取得iframe中dom元素--父子頁面互相取得對方dom元素的方法更多原生js獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr