国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

跨域傳值即主頁面與iframe之間互相傳值_javascript技巧

來源:懂視網 責編:小采 時間:2020-11-27 21:16:59
文檔

跨域傳值即主頁面與iframe之間互相傳值_javascript技巧

跨域傳值即主頁面與iframe之間互相傳值_javascript技巧:需求一:主頁面A 怎么向 iframe B 傳遞數據呢? 這種方式,是主頁面需要給 iframe B 傳遞數據,然后 iframe B 獲得到數據后進行特定的處理 實現方式 實現的技巧就是利用 location 對象的 hash 值,通過它傳遞通信數據,我們只需要在主頁面A中設置 ifra
推薦度:
導讀跨域傳值即主頁面與iframe之間互相傳值_javascript技巧:需求一:主頁面A 怎么向 iframe B 傳遞數據呢? 這種方式,是主頁面需要給 iframe B 傳遞數據,然后 iframe B 獲得到數據后進行特定的處理 實現方式 實現的技巧就是利用 location 對象的 hash 值,通過它傳遞通信數據,我們只需要在主頁面A中設置 ifra

需求一:主頁面A 怎么向 iframe B 傳遞數據呢?

這種方式,是主頁面需要給 iframe B 傳遞數據,然后 iframe B 獲得到數據后進行特定的處理

實現方式

實現的技巧就是利用 location 對象的 hash 值,通過它傳遞通信數據,我們只需要在主頁面A中設置 iframe B 的 src 后面多加個 #data 字符串(data就是你要傳遞的數據),如下圖所示:

然后在 iframe B 中通過某種方式能即時的獲取到這兒 data 就可以了,其實常用的一種方式就是:

1. 在 iframe B 中通過 setInterval 方法設置定時器, 監聽 location.href 的變化即可獲得上面的 data 信息
2. 然后 iframe B 就能根據這個 data 信息進行相應的邏輯處理

需求二:iframe B 怎么向 主頁面A 傳遞數據呢?

這種方式,是 iframe B 需要給主頁面傳遞數據,然后主頁面根據獲得到數據后進行特定的處理

實現方式

實現的技巧就是利用一個代理 IframeC,它嵌入到 iframe B 中,并且和主頁面A必須保持是同域,然后我們通過它充分利用上面第一種通信方式的實現原理就能把 iframe B 的數據傳遞給 iframeC,接下來的問題就是怎么讓iframeC把數據傳遞給主頁面A ,如下圖所示:

因為,iframeC 和主頁面是同域的,所以它們之間傳遞數據就變得簡單多了,我們這里的方式就是使用一個經常使用的屬性 window.top (也可以使用window.parent.parent),它返回對載入瀏覽器得最頂層 window 對象的引用,這樣我們就能直接條用主頁面A中方法啦,哈哈哈,簡單吧。
到此,我們做個簡單分析總結

這種實現方式的前提也是最大的缺點就是 iframe 中的內容必須是我們可控的,但是至少我們這種實現方式是建立在瀏覽器的安全規則之上的,沒有破壞應用本身的安全性。
實現時需要考慮的一些細節

盡量考慮到了易用,可擴展性和可維護性,比如:

讓第三方 App 只需加載一個我們提供的JS種子文件就能很方便的使用我們為其提供的各種工具
上面的各種工具,我們采用包的形式進行組織,最大化的實現按需加載
第一條中的JS種子文件只提供基礎的方法實現,并且把最常用的工具包放在里面,比如高度自適應
通過種子文件,我們還提供給第三方 App 一些常用的JS工具包,而且直接使用的類似YUI3模塊的動態加載機制就可使用指定的工具包
對第三方 App 和 主頁面傳遞的數據進行分類(自我調用,登錄驗證,傳遞數據等等)
傳遞的數據使用滿足特定規范的JSON格式,并通過統一的服務出口發出去,主頁面提供一個統一服務接口解析數據,并根據規范調用相應的方法
還有,就是版本控制的問題,為了盡量減少給第三方App帶來影響,以上所有這些JS文件的版本都是采用向后兼容的策略,小版本使用服務器設置SQUID緩存特定頻率的失效時間實現,大版本更新根據用戶自己的需求手動更改
當然,以上可能不是最優的解決方案,只是希望能給你一些幫助和引導,我們也在逐步的改進我們的一些實現方式,比如版本控制這塊兒,我們也有一些問題需要解決

具體的代碼

主頁面A的源碼
代碼如下:
Js代碼
/*主頁面A*/




主頁面A

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

跨域傳值即主頁面與iframe之間互相傳值_javascript技巧

跨域傳值即主頁面與iframe之間互相傳值_javascript技巧:需求一:主頁面A 怎么向 iframe B 傳遞數據呢? 這種方式,是主頁面需要給 iframe B 傳遞數據,然后 iframe B 獲得到數據后進行特定的處理 實現方式 實現的技巧就是利用 location 對象的 hash 值,通過它傳遞通信數據,我們只需要在主頁面A中設置 ifra
推薦度:
標簽: 頁面 js 主頁面
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久国产成人精品 | 欧洲人交xxx69 | 欧美日韩国产一区二区三区 | 欧美韩日| 亚洲国产精品日韩在线 | 欧美综合在线视频 | 欧美成人看片一区二区三区尤物 | 国产日本在线视频 | 国产欧美日韩中文字幕 | 国产精品观看 | 九九精品99久久久香蕉 | 成人久久久精品乱码一区二区三区 | 国产午夜小视频 | 毛片激情永久免费 | 亚洲国产精品一区二区三区 | 国产a精品 | 国内精品视频免费观看 | 国产成人亚洲欧美三区综合 | 久久国内精品 | 久久久久国产成人精品亚洲午夜 | 国产精品视频福利一区二区 | 亚洲欧美中文日韩在线v日本 | 国产精品久久久久aaaa | 欧美激情一区二区 | 亚洲欧美另类在线观看 | 日韩视频高清 | 亚洲国产精品免费 | 国产精品视频网站 | 一区二区三区视频在线观看 | 中文字幕日韩有码 | 日韩在线网 | 国产精品一区欧美日韩制服 | 91热成人精品国产免费 | 精品一区二区三区亚洲 | 国产精品免费观看网站 | 欧美精品三区 | 国产成人综合久久 | 国产片欧美片亚洲片久久综合 | 国产成人精品一区二区免费 | 图片专区亚洲欧美另类 | 国产精品亚洲片在线观看不卡 |