Javascript與iframe的那些事兒

2021-06-03 12:12:52 字數 818 閱讀 3292

iframe 很多**都在用,雖然方便開發與維護(可能同時有幾個頁面呼叫同乙個iframe),不過卻存在安全問題。嵌入iframe的頁面,父頁面與子頁面均可以很輕鬆的在同域或跨子域的情況下進行讀寫操作;在完全不同域的情況下,也可以通過更改hash的方式進行通訊。下面我在九個不同(版本的)瀏覽器中對此進行資料傳輸與更改的相容性測試。

同域或跨子域讀寫操作 iframe 裡的內容

父頁面讀寫操作子頁面:

注:在請務必通過window.onload方法訪問iframe中的節點,否則瀏覽器會提示錯誤-拒絕訪問。在 ie8, firefox3.6, opera11 下在domready時也可以訪問iframe中的節點。

子頁面讀寫操作父頁面:

小結:

跨域操作 iframe 裡內容

當兩個網頁所在域不同時,要實現資料的互相呼叫,只能通過 js 改變 location 物件的 hash 屬性的值來做到互相通訊。

父頁面:

子頁面:

小結:

由於前端解決跨域問題的侷限性比較大,所以最好用 伺服器端解決方案。

QuickTestPro處理帶有IFRAME的問題

quicktestpro處理帶有iframe的問題 問題原文 我的web頁最下面一塊是引入iframe的版權頁面.導致我動態讀取不到iframe外的其它鏈結。我的動態讀取語句如下 set odesc description.create odesc class name value link set...

jQuery子iframe呼叫父iframe

子iframe使用jquery訪問父頁面元素 在 選擇元素時加入第二個引數parent.document parent.document val index.html head style background color orange height 200px width 50 float lef...

如何根據iframe內嵌頁面調整iframe高寬

問題來自於工作的例項,我的乙個網域名稱a的頁面,有個iframe,它可能內嵌了另乙個網域名稱b的頁面,也可能內嵌網域名稱c的頁面,但是呢,b和c的頁面大小是不一樣的,特別是高是不一樣的高,那麼我如何設定iframe的height屬性呢?這個本質就是跨域設定的問題。b和c提供乙個jsonp介面,讓有i...