優雅絕妙的Javascript跨域問題解決方案

來源:互聯網
上載者:User

關於Javascript跨域問題的解決方案已在之前的一片文章中詳細說明,詳見:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx;

除了文中提到的3種解決方案之外,在今年的baidu salon分享會上黃方榮主講的《WEB資料互動的藝術》中提到一個非常優雅絕妙的解決方案!話不多說,直接上解決方案原理圖:

該圖要解決的問題說明如下:
在AAA.com網域名稱下的index.htm頁面中內嵌了BBB.com網域名稱下的一個頁面index.htm,正常情況下iframe內部的index.htm頁面是無法訪問父頁面index.htm中的任何dom對象或者js函數的,因為跨域,但我們經常又需要做一些參數回傳的事情怎麼辦呢?以上的這種實現方式就很好的解決了這個問題;

解決方案的關鍵優雅之處在於:瀏覽器雖然會禁止js跨域訪問頁面中的對象,但對於iframe的層級關係引用並沒有做限制,即parent仍然可用;該方案就是利用了2層內嵌iframe、使用第二級iframe中的頁面與parent.parent的頁面是同網域名稱的關係,從而避免跨域問題實現兩個頁面間相關資料的傳遞,本質上就是利用parent.parent實現對父父頁面中js的回調

舉個實際的案例吧:
功能描述
A網域名稱下的頁面index.htm中內嵌了一個iframe頁面,iframe內引用的是B網域名稱的sub-index.htm頁面,但是為了避免出現在index.htm頁面中出現捲軸,我們需要明確知道sub-index.htm頁面的高度和寬度,可是sub-index.htm的頁面內容是不可控的,可能會根據不同使用者頁面大小會不一樣;問題就是如何把sub-index.htm頁面的高度和寬度傳遞給index.htm頁面?

具體解決
1、在index.htm頁面中聲明一個js函數process(height, width);用來實現設定頁面內iframe的高度和寬度;
2、在sub-index.htm頁面中再內嵌一個隱藏的iframe,iframe的src指向A網域名稱下的頁面ex.htm?height=xx&width=yy,該頁面沒有任何內容,只是用來傳遞sub-index.htm頁面載入完之後的寬度和高度這兩個資料的,頁面內js拿到request中的參數之後直接調用parent.parent.process(height, width);完成對父頁面寬度和高度的設定;
看如下的這個時序圖:

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.