社群

學習

工具庫

AI工具

休閒

繁体中文

首頁

web前端

js教程

對frameset、frame、iframe的js操作範例程式碼_javascript技巧

對frameset、frame、iframe的js操作範例程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:25 PM

frame iframe

框架程式設計概述
一個HTML頁面可以有一個或多個子框架，這些子框架以來標記，用來顯示一個獨立的HTML頁面。這裡所講的框架程式設計包括框架的自我控制以及框架之間的互相訪問，例如從一個框架中引用另一個框架中的JavaScript變數、呼叫其他框架內的函數、控制另一個框架中表單的行為等。 <br><br><strong>框架間的互相引用</strong> <br>一個頁面中的所有框架以集合的形式作為window對象的屬性提供，例如：window.frames就表示該頁內所有框架的集合，這和表單物件、連結物件、圖片物件等是類似的，不同的是，這些集合是document的屬性。因此，要引用一個子框架，可以使用以下語法： <br>window.frames["frameName"]; <br>window.frames.frameName <br>window.frames[index] <br>其中，window字樣也可以用self代替或省略，假設frameName為頁面中第一個框架，則以下的寫法是等價的： <br>self.frames["frameName"] <br>self.frames[0] <br>frames [0] <br>frameName <br>每個框架都對應一個HTML頁面，所以這個框架也是一個獨立的瀏覽器窗口，它具有窗口的所有性質，所謂對框架的引用也就是對window對象的引用。有了這個window對象，就可以很方便地對其中的頁面進行操作，例如使用window.document對象向頁面寫入資料、使用window.location屬性來改變框架內的頁面等。 <br><br><strong>以下分別介紹不同層次框架間的互引：</strong> <br><br>1．父框架到子框架的引用<br>知道了上述原理，從父框架引用子框架變的非常容易，即： <br>window.frames["frameName"]; <br>這樣就引用了頁面內名為frameName的子框架。如果要引用子框架內的子框架，根據引用的框架實際上就是window物件的性質，可以這樣實作： <br>window.frames["frameName"].frames["frameName2"]; <br>這樣就引用到了二級子框架，以此類推，可以實現多層框架的引用。 <br><br>2．子框架到父框架的引用 <br>每個window物件都有parent屬性，表示它的父框架。如果該框架已經是頂層框架，則window.parent也表示該框架本身。 <br><br>3．兄弟框架間的引用<br>如果兩個框架同為一個框架的子框架，它們稱為兄弟框架，可以透過父框架來實現互相引用，例如一個頁麵包括2個子框架： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="81594" class="copybut" id="copybut81594" onclick="doCopy('code81594')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code81594"> <br><frameset rows="50%,50%"> <br><frame src="1.html" name="frame1"> <br><frame src="2.html" name="frame2"> <br> </frameset> <br> </div> <br>在frame1中可以使用下列語句來引用frame2： <br>self.parent.frames["frame2"]; <br><br>4．不同層次框架間的互相引用 <br>框架的層次是針對頂層框架而言的。當層次不同時，只要知道自己所在的層次以及另一個框架所在的層次和名字，利用框架引用的window物件性質，可以輕鬆實現互相訪問，例如： <br>self.parent.frames["childName "].frames["targetFrameName"]; <br><br>5．頂層框架的參考 <br>和parent屬性類似，window物件還有一個top屬性。它表示對頂層框架的引用，可以用來判斷一個框架本身是否為頂層框架，例如： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="73308" class="copybut" id="copybut73308" onclick="doCopy('code73308')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code73308"> <br>//判斷本框架是否為頂層框架<br>if(self==top){ <br>//dosomething <br>} <br> </div> <br> <strong>改變框架的載入頁</strong> <br>對框架的引用就是對window物件的引用，利用window物件的location屬性，可以改變框架的導航，例如： <br>window.frames[0] .location="1.html"; <br>這就將頁面中第一個框架的頁面重定向到1.html，利用這個性質，甚至可以使用一條連結來更新多個框架。 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="51282" class="copybut" id="copybut51282" onclick="doCopy('code51282')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code51282"> <br><frameset rows="50%,50%">50%,50%"> <br><frame src="1.html" name="frame1"> <br><frame src="2.html" name="frame2"> <br> </frameset> <br> <br><a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a> <br> <br> </div> <br>引用其他框架內的JavaScript變數和函數<br>在介紹引用其他框架內JavaScript變數和函數的技術之前，先來看看以下程式碼：<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="90803" class="copybut" id="copybut90803" onclick="doCopy('code90803')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code90803"> <br><script language="JavaScript" type="text/javascript"> <BR> <BR></script> <br> </div> <br>如果運行了這段程式碼，會彈出「hello,ajax!」的窗口，這正是執行hello()函數的結果。那為什麼hello()變成了window物件的方法呢？因為在一個頁面內定義的所有全域變數和全域函數都是作為window物件的成員。例如： <br>var a=1; <br>alert(window.a); <br>就會彈出對話框顯示為1。同樣的原理，在不同框架之間共享變數和函數，就是要透過window物件來呼叫。 <br>例如：一個商品瀏覽頁面由兩個子框架組成，左側表示商品分類的連結；當使用者點擊分類連結時，右側顯示對應的商品清單；使用者可以點擊商品旁的【購買】連結將商品加入購物車。 <br>在這個例子中，可以利用左側導航頁面來儲存使用者想要購買的商品，因為當使用者點擊導覽連結時，變化的是另外一個頁面，即商品展示頁面，而導覽頁面本身是不變的，因此其中的JavaScript變數不會遺失，可以用來儲存全域資料。其實作原理如下： <br><br>假設左側頁為link.html，右側頁為show.html，頁面結構如下： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="72240" class="copybut" id="copybut72240" onclick="doCopy('code72240')"><u>複製程式碼</u></a></span> 代碼如下:</div> <div class="codebody" id="code72240"> <br> <br> <br> <br><title> New Document </title> <br> <br><frameset cols="20%,80%"> <br><frame src="link.html" name="link"> <br><frame src="show.html" name="show"> <br> </frameset> <br> </div>

本網站聲明

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）

2 週前 By 尊渡假赌尊渡假赌尊渡假赌

倉庫：如何復興隊友

4 週前 By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island冒險：如何獲得巨型種子

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

擊敗分裂小說需要多長時間？

3 週前 By DDD

R.E.P.O.保存文件位置：在哪里以及如何保護它？

3 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7313

9

Java教學

1625

14

CakePHP 教程

1348

46

Laravel 教程

1260

25

PHP教程

1207

29

顯示更多

Related knowledge

我該如何裁剪HTML中的IFrame？

我該如何裁剪HTML中的IFrame？ Aug 29, 2023 pm 04:33 PM

我該如何裁剪HTML中的IFrame？

iframe中的data-id是什麼意思

iframe中的data-id是什麼意思 Aug 28, 2023 pm 02:25 PM

iframe中的data-id是什麼意思

iframe為什麼加載慢

iframe為什麼加載慢 Aug 24, 2023 pm 05:51 PM

iframe為什麼加載慢

什麼技術可以取代iframe

什麼技術可以取代iframe Aug 24, 2023 pm 01:53 PM

什麼技術可以取代iframe

微軟：每次造訪時 Outlook 錯誤都會下載「TokenFactoryIframe」文件

微軟：每次造訪時 Outlook 錯誤都會下載「TokenFactoryIframe」文件 Apr 19, 2023 am 08:25 AM

微軟：每次造訪時 Outlook 錯誤都會下載「TokenFactoryIframe」文件

iframe有哪些載入事件

iframe有哪些載入事件 Aug 28, 2023 pm 01:55 PM

iframe有哪些載入事件

iframe中的危險在哪裡

iframe中的危險在哪裡 Sep 08, 2023 pm 03:14 PM

iframe中的危險在哪裡

Python中iframe是什麼意思

Python中iframe是什麼意思 Aug 25, 2023 pm 03:24 PM

Python中iframe是什麼意思

See all articles