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