JS中FRAME的操作問(wèn)題實(shí)例分析

更新時(shí)間：2014年10月21日 09:50:21 投稿：shichen2014

這篇文章主要介紹了JS中FRAME的操作問(wèn)題實(shí)例分析,詳細(xì)講述了js針對(duì)frame框架操作中的各種訪問(wèn)問(wèn)題,需要的朋友可以參考下

本文實(shí)例探討了JS中FRAME的操作問(wèn)題，分享給大家供大家參考。具體分析如下：

以上圖為例，在這里把frame之間的互相操作簡(jiǎn)單列為：1變量2方法3頁(yè)面之間元素的互相獲取。

一、首先從父(frameABC)------->子(frameA,frameB,frameC)

① 訪問(wèn)變量名name

假如在frameABC中操作那么可以：

復(fù)制代碼代碼如下:

window.frames("frameA").contentWindow.name

或者

復(fù)制代碼代碼如下:

document.getElementById("frameA").contentWindow.name

或者

復(fù)制代碼代碼如下:

jquery：window.$("#frameA")[0].contentWindow.name

② 訪問(wèn)方法func

假如在frameABC中操作那么可以：

復(fù)制代碼代碼如下:

window.frames("frameA").contentWindow.func();

或者

復(fù)制代碼代碼如下:

document.getElementById("frameA").contentWindow.func();

或者

復(fù)制代碼代碼如下:

jquery：window.$("#frameA")[0].contentWindow.func();

③ 訪問(wèn)子頁(yè)面元素:username

假如在frameABC中操作那么可以：

復(fù)制代碼代碼如下:

window.frames("frameA").contentWindow.document.getElementById("username");

或者

復(fù)制代碼代碼如下:

document.getElementById("frameA").contentWindow.document.getElementById("username");

或者

復(fù)制代碼代碼如下:

jquery：window.$("#frameA")[0].contentWindow.$("#username");

二、然后從子(frameA,frameB,frameC)------------>到父(frameABC)

① 訪問(wèn)父頁(yè)面變量name,假如在frameA中(子頁(yè)面)操作那么可以：

復(fù)制代碼代碼如下:

window.parent.name;

② 訪問(wèn)父頁(yè)面方法func,假如在frameA中(子頁(yè)面)操作那么可以：

復(fù)制代碼代碼如下:

window.parent.func();

③ 訪問(wèn)父頁(yè)面元素username,假如在frameA中(子頁(yè)面)操作那么可以：

復(fù)制代碼代碼如下:

window.parent.$("#username")

或者：

復(fù)制代碼代碼如下:

window.parent.document.getElementById("username");

總結(jié)：

frame只是一個(gè)頁(yè)面框架，要想操作子frame中的元素都需要首先進(jìn)入到window或者contentWindow。從子頁(yè)面訪問(wèn)父頁(yè)面，需要計(jì)算好父子關(guān)系，分幾層結(jié)構(gòu)。

在網(wǎng)上看了其他帖子，談到有關(guān)頁(yè)面加載的問(wèn)題。大概意思是在子frame頁(yè)面還沒加載出來(lái)就進(jìn)行元素操作，會(huì)引起bug，感興趣的朋友可以針對(duì)性的測(cè)試一下，相信會(huì)有新的收獲！

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

JS
FRAME

相關(guān)文章

Javascript 靜態(tài)頁(yè)面實(shí)現(xiàn)隨機(jī)顯示廣告的辦法
最近在做私服發(fā)布站時(shí)，客戶要求實(shí)現(xiàn)廣告隨機(jī)排序，而且要求在html頁(yè)面實(shí)現(xiàn)，也就是說(shuō)必須使用javascript來(lái)完成了。
2010-11-11
JavaScript使用Base64編碼和Blob對(duì)象加密圖像url地址
有時(shí)候會(huì)看到一些網(wǎng)站的圖片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d,這樣的圖片加載怎么實(shí)現(xiàn)呢？本文講解在瀏覽器中JavaScript使用解析Base64編碼和Blob對(duì)象技術(shù)來(lái)實(shí)現(xiàn),下面是實(shí)現(xiàn)的步驟和相應(yīng)的示例代碼,
2023-12-12
pageGroup.js實(shí)現(xiàn)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了pageGroup.js實(shí)現(xiàn)分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
一文帶你快速學(xué)會(huì)JavaScript條件判斷及高級(jí)用法
JavaScript支持其用于執(zhí)行根據(jù)不同的條件不同的操作條件語(yǔ)句,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中更好的使用條件判斷的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
Webpack簡(jiǎn)單實(shí)現(xiàn)兩個(gè)自定義插件詳解
這篇文章主要為大家詳細(xì)介紹了Webpack簡(jiǎn)單實(shí)現(xiàn)兩個(gè)自定義插件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼
大家都知道Swiper(Swiper master)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁(yè)觸摸內(nèi)容滑動(dòng)js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08
js實(shí)現(xiàn)讓某個(gè)動(dòng)作延遲幾秒執(zhí)行
這篇文章主要介紹了使用js實(shí)現(xiàn)讓某個(gè)動(dòng)作延遲幾秒執(zhí)行的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataURL讀取圖像文件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
layui異步加載table表中某一列數(shù)據(jù)的例子
今天小編就為大家分享一篇layui異步加載table表中某一列數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
詳解微信小程序開發(fā)—你期待的分享功能來(lái)了，微信小程序序新增5大功能
微信小程序在12月21日發(fā)布了新版本的開發(fā)工具，并在官網(wǎng)公布新增分享、模板消息、客服消息、掃一掃、帶參數(shù)二維碼功能。
2016-12-12