JS中FRAME的操作問題實(shí)例分析
本文實(shí)例探討了JS中FRAME的操作問題，分享給大家供大家參考。具體分析如下：
以上圖為例，在這里把frame之間的互相操作簡單列為：1變量2方法3頁面之間元素的互相獲取。
一、 首先從 父(frameABC)------->子(frameA,frameB,frameC)
① 訪問變量名name
假如在frameABC中操作那么可以：
或者
或者
② 訪問方法func
假如在frameABC中操作那么可以：
或者
或者
③ 訪問子頁面元素:username
假如在frameABC中操作那么可以：
或者
或者
二、 然后從子(frameA,frameB,frameC)------------>到父(frameABC)
① 訪問父頁面變量name,假如在frameA中(子頁面)操作那么可以：
② 訪問父頁面方法func,假如在frameA中(子頁面)操作那么可以：
③ 訪問父頁面元素username,假如在frameA中(子頁面)操作那么可以：
或者：
總結(jié)：
frame只是一個(gè)頁面框架，要想操作子frame中的元素都需要首先進(jìn)入到window或者contentWindow。從子頁面訪問父頁面，需要計(jì)算好父子關(guān)系，分幾層結(jié)構(gòu)。
在網(wǎng)上看了其他帖子，談到有關(guān)頁面加載的問題。大概意思是在子frame頁面還沒加載出來就進(jìn)行元素操作，會(huì)引起bug，感興趣的朋友可以針對(duì)性的測試一下，相信會(huì)有新的收獲！
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 禁止iframe頁面的所有js腳本如alert及彈出窗口等
- jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
- js取得html iframe中的元素和變量值
- js操作iframe父子窗體示例
- iframe子頁面與父頁面在同域或不同域下的js通信
- js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
- js判斷iframe內(nèi)的網(wǎng)頁是否滾動(dòng)到底部觸發(fā)事件
- js調(diào)用iframe實(shí)現(xiàn)打印頁面內(nèi)容的方法
- js函數(shù)在frame中的相互調(diào)用詳解
- js動(dòng)態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實(shí)現(xiàn)無刷新
- JS操作iframe里的dom(實(shí)例講解)
- 兼容主流瀏覽器的iframe自適應(yīng)高度js腳本
相關(guān)文章
Javascript 靜態(tài)頁面實(shí)現(xiàn)隨機(jī)顯示廣告的辦法
最近在做私服發(fā)布站時(shí)，客戶要求實(shí)現(xiàn)廣告隨機(jī)排序，而且要求在html頁面實(shí)現(xiàn)，也就是說必須使用javascript來完成了。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ù)來實(shí)現(xiàn),下面是實(shí)現(xiàn)的步驟和相應(yīng)的示例代碼,2023-12-12
這篇文章主要為大家詳細(xì)介紹了pageGroup.js實(shí)現(xiàn)分頁功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
一文帶你快速學(xué)會(huì)JavaScript條件判斷及高級(jí)用法
JavaScript支持其用于執(zhí)行根據(jù)不同的條件不同的操作條件語句,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中更好的使用條件判斷的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Webpack簡單實(shí)現(xiàn)兩個(gè)自定義插件詳解
這篇文章主要為大家詳細(xì)介紹了Webpack簡單實(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)頁觸摸內(nèi)容滑動(dòng)js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，需要的朋友可以參考借鑒，下面來一起看看吧。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ì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
詳解微信小程序開發(fā)—你期待的分享功能來了，微信小程序序新增5大功能
微信小程序在12月21日發(fā)布了新版本的開發(fā)工具，并在官網(wǎng)公布新增分享、模板消息、客服消息、掃一掃、帶參數(shù)二維碼功能。2016-12-12