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

2021-09-23 18:56:31 字數 479 閱讀 5430

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

這個本質就是跨域設定的問題。

b和c提供乙個jsonp介面,讓有iframe的頁面a來呼叫,這個jsonp介面的目的就是告訴a,我的頁面的高寬各是多少。

1 首先給a頁面的iframe設定個id,比如id=」aiframe」

2 b和c頁面內嵌一段html:

3 其中 是a提供的乙個介面,這個介面返回一段js

由於這個介面是動態的,這裡返回的200是根據b或者c呼叫介面的引數返回的。

再由於這個介面和有iframe的a是同域的,所以可以操作iframe的dom屬性。

第二種解法可以做擴充完善:

1 第2步中的b,c內嵌的html可以使用window.innerheight來自動獲取頁面

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

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

iframe頁面的 內嵌框架

iframe 在實際專案中是非常常見的 作用 在當前頁面中 可以通過 iframe 來檢視另乙個頁面 操作 1.通過iframe的src 指定的頁面.html 顯示指定頁面內容 2.通過超連結 操作 iframe iframe必須設定name iframe名字 a標籤 包含iframe的頁面可以叫 ...

如何實現 iframe 子頁面和父頁面聯調?

目錄通過 chrome 開發者工具編輯 iframe src 的方式來達到實時預覽,然後過載 iframe 來看最新效果 為已有系統擴充套件乙個 iframe 子頁面,該子頁面風格比較獨特,又需要讓子頁面在系統和諧融入時,用來除錯可以節省大量時間,比從頭搭框架要來的快得多 就比如我有乙個藍色調的後台...