一種iframe跨域高度自適應(yīng)的方法
【專利摘要】本發(fā)明涉及WEB開發(fā)【技術(shù)領(lǐng)域】，具體涉及一種IFRAME跨域高度自適應(yīng)的方法。本發(fā)明方法通過(guò)在域A下設(shè)置一個(gè)中轉(zhuǎn)頁(yè)面a，嵌入被嵌套B域下的頁(yè)面b中，而b頁(yè)面又嵌入在域A下的主界面m中。當(dāng)瀏覽器訪問(wèn)頁(yè)面m時(shí)載入頁(yè)面b，觸發(fā)頁(yè)面b的onload事件獲取自身頁(yè)面的高度，然后頁(yè)面b載入頁(yè)面a，并將其高度做為參數(shù)賦值給頁(yè)面a的location對(duì)象，頁(yè)面a就可以通過(guò)location.hash獲取頁(yè)面b的高度。本發(fā)明解決了在WEB開發(fā)過(guò)程中，通過(guò)IFRAME跨域嵌入頁(yè)面時(shí)，IFRAME高度不能自動(dòng)適應(yīng)的問(wèn)題，可廣泛應(yīng)用于WEB開發(fā)中。
【專利說(shuō)明】-種I FRAME跨域高度自適應(yīng)的方法

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及WEB開發(fā)【技術(shù)領(lǐng)域】，具體涉及一種IFRAME跨域高度自適應(yīng)的方法。

【背景技術(shù)】
[0002] 在WEB開發(fā)過(guò)程，經(jīng)常會(huì)遇到使用IFRAME來(lái)嵌入其它的頁(yè)面內(nèi)容，同域下通過(guò) JavaScript對(duì)其高度設(shè)置很容易操作。但是在跨域的情況下，由于客戶端JavaScript受瀏 覽器完全策略的限制，被嵌套的頁(yè)面在獲取或修改父頁(yè)面的DOM屬性時(shí)會(huì)出現(xiàn)權(quán)限不足的 問(wèn)題，也就是說(shuō)JavaScript只能操作同域下的屬性，而無(wú)法跨域操作。


【發(fā)明內(nèi)容】

[0003] 本發(fā)明解決的技術(shù)問(wèn)題在于提供一種IFRAME跨域高度自適應(yīng)的方法；解決跨域 操作問(wèn)題。
[0004] 本發(fā)明解決上述技術(shù)問(wèn)題的技術(shù)方案是：
[0005] 所述的方法包含以下幾個(gè)步驟：
[0006] 步驟一、在域A下創(chuàng)建主頁(yè)面m，和中轉(zhuǎn)頁(yè)面a ;
[0007] 步驟二、在域B下創(chuàng)建嵌套的頁(yè)面b，添加一個(gè)隱藏的IFRAME，并指向頁(yè)面a ;
[0008] 步驟三、在主頁(yè)面m中添加一個(gè)IFRAME，嵌入頁(yè)面b ;
[0009] 步驟四、在主頁(yè)面m中通過(guò)中轉(zhuǎn)頁(yè)面a傳遞頁(yè)面b的高度，設(shè)置頁(yè)面m中IFRAME 的高度；
[0010] 當(dāng)訪問(wèn)頁(yè)面m時(shí)，頁(yè)面高度可隨著嵌入內(nèi)容的高度而自動(dòng)適應(yīng)。
[0011] 所述的步驟一中去掉中轉(zhuǎn)頁(yè)面a中〈BODY〉標(biāo)簽內(nèi)的所有HTML代碼。
[0012] 所述的步驟二中，在域B下創(chuàng)建一個(gè)將要嵌入的頁(yè)面b，添加一個(gè)隱藏的IFRAME， 寬度高度設(shè)置為0;然后在頁(yè)面加載完成時(shí)，JS獲取頁(yè)面的高度進(jìn)行保存，并設(shè)置隱藏的 IFRAME的src屬性為域A下中轉(zhuǎn)頁(yè)面a的鏈接，同時(shí)將頁(yè)面b的高度作為參數(shù)追加到鏈接 后面進(jìn)行傳遞。
[0013] 所述的步驟三中，在步驟一所創(chuàng)建的頁(yè)面m中添加一個(gè)IFRAME標(biāo)簽，高度設(shè)置為 自動(dòng)，其src屬性指向?qū)⒁度氲牟襟E二中所創(chuàng)建的頁(yè)面b的訪問(wèn)鏈接。
[0014] 所述的步驟四中，在中轉(zhuǎn)頁(yè)面a加載時(shí)通過(guò)JS獲取頁(yè)面m中的IFRAME對(duì)象，再獲 取域B下的嵌套頁(yè)面b中隱藏IFRAME的location對(duì)象，進(jìn)而獲取其hash值，即為頁(yè)面b 的高度，再賦值給頁(yè)面m中IFRAME的高度。
[0015] 本發(fā)明通過(guò)中轉(zhuǎn)頁(yè)面a獲取到嵌套頁(yè)面b的高度，以參數(shù)形式傳遞給主頁(yè)面m，設(shè) 置其IFRAME的高度，使其高度隨內(nèi)容自動(dòng)適應(yīng)。本發(fā)明很好的回避了 JavaScript跨域操 作的權(quán)限問(wèn)題，進(jìn)而解決了跨域操作的問(wèn)題。

【專利附圖】

【附圖說(shuō)明】
[0016] 下面結(jié)合附圖對(duì)本發(fā)明進(jìn)一步說(shuō)明：
[0017] 附圖是本發(fā)明方法流程框圖。

【具體實(shí)施方式】
[0018] 如圖1所示，本發(fā)明具體包含以下幾個(gè)步驟：
[0019] 步驟一：在域A(www. A. com)下創(chuàng)建訪問(wèn)主頁(yè)面m和中轉(zhuǎn)頁(yè)面a，去掉頁(yè)面a中 〈BODY〉標(biāo)簽內(nèi)的所有HTML代碼；
[0020] 關(guān)鍵代碼：
[0021] iframe 主頁(yè)面：m. html
[0022] 〈iframe id = " iframe_m " name = " iframe m " src = " " width ="100% " height = " auto" scrolling = " no" frameborder = " 0〃 ></iframe>
[0023] 步驟二：在域B(www.B. com)下創(chuàng)建一個(gè)將要嵌入的頁(yè)面b，添加一個(gè)隱藏的 IFRAME，寬度高度設(shè)置為0,然后在頁(yè)面加載完成時(shí)，JS獲取頁(yè)面的高度進(jìn)行保存，并設(shè)置 隱藏的IFRAME的src屬性為域A下中轉(zhuǎn)頁(yè)面a的鏈接，同時(shí)把頁(yè)面b的高度作為參數(shù)追加 到鏈接后面進(jìn)行傳遞；
[0024] 關(guān)鍵代碼：
[0025]

【權(quán)利要求】
1. 一種IFRAME跨域高度自適應(yīng)的方法，其特征在于：所述的方法包含以下幾個(gè)步驟： 步驟一、在域A下創(chuàng)建主頁(yè)面m，和中轉(zhuǎn)頁(yè)面a ; 步驟二、在域B下創(chuàng)建嵌套的頁(yè)面b，添加一個(gè)隱藏的IFRAME，并指向頁(yè)面a ; 步驟三、在主頁(yè)面m中添加一個(gè)IFRAME，嵌入頁(yè)面b ; 步驟四、在主頁(yè)面m中通過(guò)中轉(zhuǎn)頁(yè)面a傳遞頁(yè)面b的高度，設(shè)置頁(yè)面m中IFRAME的高 度； 當(dāng)訪問(wèn)頁(yè)面m時(shí)，頁(yè)面高度可隨著嵌入內(nèi)容的高度而自動(dòng)適應(yīng)。
2. 根據(jù)權(quán)利要求1所述的IFRAME跨域高度自適應(yīng)的方法，其特征在于：所述的步驟一 中去掉中轉(zhuǎn)頁(yè)面a中〈BODY〉標(biāo)簽內(nèi)的所有HTML代碼。
3. 根據(jù)權(quán)利要求1所述的IFRAME跨域高度自適應(yīng)的方法，其特征在于：所述的步驟二 中，在域B下創(chuàng)建一個(gè)將要嵌入的頁(yè)面b，添加一個(gè)隱藏的IFRAME，寬度高度設(shè)置為0 ;然后 在頁(yè)面加載完成時(shí)，JS獲取頁(yè)面的高度進(jìn)行保存，并設(shè)置隱藏的IFRAME的src屬性為域A 下中轉(zhuǎn)頁(yè)面a的鏈接，同時(shí)將頁(yè)面b的高度作為參數(shù)追加到鏈接后面進(jìn)行傳遞。
4. 根據(jù)權(quán)利要求2所述的IFRAME跨域高度自適應(yīng)的方法，其特征在于：所述的步驟二 中，在域B下創(chuàng)建一個(gè)將要嵌入的頁(yè)面b，添加一個(gè)隱藏的IFRAME，寬度高度設(shè)置為0 ;然后 在頁(yè)面加載完成時(shí)，JS獲取頁(yè)面的高度進(jìn)行保存，并設(shè)置隱藏的IFRAME的src屬性為域A 下中轉(zhuǎn)頁(yè)面a的鏈接，同時(shí)將頁(yè)面b的高度作為參數(shù)追加到鏈接后面進(jìn)行傳遞。
5. 根據(jù)權(quán)利要求1至4任一項(xiàng)所述的IFRAME跨域高度自適應(yīng)的方法，其特征在于：所 述的步驟三中，在步驟一所創(chuàng)建的頁(yè)面m中添加一個(gè)IFRAME標(biāo)簽，高度設(shè)置為自動(dòng)，其src 屬性指向?qū)⒁度氲牟襟E二中所創(chuàng)建的頁(yè)面b的訪問(wèn)鏈接。
6. 根據(jù)權(quán)利要求1至4任一項(xiàng)所述的IFRAME跨域高度自適應(yīng)的方法，其特征在于：所 述的步驟四中，在中轉(zhuǎn)頁(yè)面a加載時(shí)通過(guò)JS獲取頁(yè)面m中的IFRAME對(duì)象，再獲取域B下的 嵌套頁(yè)面b中隱藏IFRAME的location對(duì)象，進(jìn)而獲取其hash值，即為頁(yè)面b的高度，再賦 值給頁(yè)面m中IFRAME的高度。
7. 根據(jù)權(quán)利要求5所述的IFRAME跨域高度自適應(yīng)的方法，其特征在于：所述的步驟四 中，在中轉(zhuǎn)頁(yè)面a加載時(shí)通過(guò)JS獲取頁(yè)面m中的IFRAME對(duì)象，再獲取域B下的嵌套頁(yè)面b 中隱藏IFRAME的location對(duì)象，進(jìn)而獲取其hash值，即為頁(yè)面b的高度，再賦值給頁(yè)面m 中IFRAME的高度。
【文檔編號(hào)】G06F17/30GK104391909SQ201410655698
【公開日】2015年3月4日 申請(qǐng)日期:2014年11月17日 優(yōu)先權(quán)日:2014年11月17日
【發(fā)明者】丁繼鋒, 徐震宇, 孫傲冰, 季統(tǒng)凱 申請(qǐng)人:國(guó)云科技股份有限公司