iframe自適應(yīng)高度，iframe通常是用于網(wǎng)站的后端，在前端使用iframe對搜索引擎優(yōu)化不是很優(yōu)化，除非在特殊情況下才使用iframe
昨天在開發(fā)一個項目的時候就遇到了這個問題，需要讓iframe自適應(yīng)高度，想到的第一個辦法就是在子頁面里面獲取本網(wǎng)頁的高度然后在設(shè)置父頁面的iframe高度，由于我的切片文件都沒有在環(huán)境下跑，代碼寫好了后居然報錯了：
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
其意思就是跨域了
然后把將代碼放在環(huán)境下跑，就ok了，注意：代碼一定要放在環(huán)境下面跑才行。
父頁面代碼index.html：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.min.js" ></script> </head> <body> 這是父頁面的內(nèi)容，iframe自適應(yīng)高度演示代碼 <iframe width="100%" src="index2.html" frameborder="0"></iframe> 這是父頁面的內(nèi)容，iframe自適應(yīng)高度演示代碼 </body> </html>
子頁面的代碼index2.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.min.js" ></script>
</head>
<body>
<div>這是在iframe框架的子頁面，讓iframe自適應(yīng)高度演示代碼</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面，讓iframe自適應(yīng)高度演示代碼</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<div>這是在iframe框架的子頁面</div>
<script type="text/javascript">
var bodyHeight = $('body').height(); //獲取當(dāng)前頁面的高度
$('iframe', window.parent.document).height(bodyHeight+20); //設(shè)置父頁面中iframe的高度
</script>
</body>
</html>
渝公網(wǎng)安備 50010802001760號
