網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

iframe自適應高度【框架自適應高度】

日期:2013-12-07  來源:攀枝花惠康網絡公司

iframe自順應高度傳統做法年夜致有兩個:
體例一,在每個被包含頁在自己內容加載完畢之后,執行JS取得本頁面的高度,然后去同步父頁面的iframe高度。
體例二,在主頁面iframe的onload事務中執行JS,去取得被包含頁的高度內容,然后去同步高度。
在代碼維護角度考慮,體例二是優于體例一的,因為體例一,每個被包含頁都要去惹人一段不異的代碼來做這個工作,建樹了良多若干好多副本。

可是碰著有些頁面會按照用戶的操作或者為了增添用戶體驗的時辰我們的頁面高度可能會增添。這就要求使用其他法子:我們可以用setInterval();

代碼如下:

XML/HTML代碼
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”><HEAD><TITLE>iframe自順應高度-demo</TITLE>
  3. <META http-equiv=Content-Type content=“text/html; charset=GBK”>
  4. <META content=“MSHTML 6.00.6001.18063″ name=GENERATOR></HEAD>
  5. <BODY>
  6. <DIV
  7. style=“BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; WIDTH: 400px; BORDER-BOTTOM: 1px dotted”><IFRAME
  8. id=frame_content src=“iframe_b.html” frameBorder=0 scrolling=no
  9. onload=this.height=100></IFRAME></DIV>
  10. <DIV><BUTTON onclick=checkHeight()>Check Height</BUTTON></DIV>
  11. <SCRIPT type=text/javascript>
  12. function reinitIframe(){
  13. var iframe = document.getElementById(“frame_content”);
  14. try{
  15. var bHeight = iframe.contentWindow.document.body.scrollHeight;
  16. var dHeightiframe.contentWindow.document.documentElement.scrollHeight;
  17. var height = Math.max(bHeight, dHeight);
  18. iframe.height = height;
  19. }catch (ex){}
  20. }
  21. window.setInterval(“reinitIframe()”, 200);
  22. function checkHeight() {
  23. var iframe = document.getElementById(“frame_content”);
  24. var bHeight = iframe.contentWindow.document.body.scrollHeight;
  25. var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  26. alert(“bHeight:” + bHeight + ”, dHeight:” + dHeight);
  27. }
  28. </SCRIPT>
  29. </BODY></HTML>

查看完整的演示:http://www.css88.com/demo/iframe/iframe.htm

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

  • 提交設計需求
    您可以通過以下聯系方式提交設計需求
  • 制作周期與費用評估
    收到您的需求后,我們將對網站建設周期和費用進行評估
  • 簽訂服務合同
    雙方確認需求后簽訂服務合同協議,網站建設開發正式啟動
  • 網站制作及修改
    約定工期內提交網站初稿,并與客戶溝通修改
  • 完稿及驗收
    完成網站開發制作并交付用戶,驗收合格后付款
  • 售后及維護
    根據用戶需要況進行免費營銷指導以及有償網絡營銷及網站維護

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图