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


問題來自於工作的實例,我的一個域名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:

<iframe src=”http://A.com/detail/iframe?height=200&weight=100”></iframe>

3 其中http://A.com/detail/iframe A提供的一個接口,這個接口返回一段js

<script type=”text/javascript”>parent.parent.getElementById(“aiframe”).style.height=”200px”</script>

由於這個接口是動態的,這里返回的200是根據B或者C調用接口的參數返回的。

再由於這個接口和有iframe的A是同域的,所以可以操作iframe的DOM屬性。

補充

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

1 第2步中的B,C內嵌的html可以使用window.innerHeight來自動獲取頁面

2 第2步中的內嵌html可以替換成一個A的js文件,這個文件做的事情就是append這個A


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM