解決iframe高度自適應的問題

解決iframe高度自適應的問題

最近做某項目,要用到iframe實現類似tab切換的功能,遇到高度不能自適應的問題,最后還是靠張鑫旭老師的文章解決問題,想看具體的直接點鏈接,下面上代碼:

父頁面代碼

 var iframe = document.getElementById("iframe");
 var iframeHeight = function() {
   var hash = window.location.hash.slice(1),h;
   if (hash && /height=/.test(hash)) {
      h = hash.replace("height=", "");
      iframe.height = h;
   }
  setTimeout(iframeHeight, 100);
 };
 iframeHeight();

子頁面代碼

var height = $(document).height();
var hostUrl = window.top.location.toString().split("#")[0];
if (hostUrl) {
  hostUrl += "#height=" + height;
  window.top.location = hostUrl;
}

OK!完美解決

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 自適應高度,其實就是設置iframe的高度,使其等于內嵌網頁的高度,從而看不出來滾動條和嵌套痕跡。對于用戶體驗和網...
    布拉德皮蛋_qzy閱讀 3,384評論 0 3
  • 1. tab列表折疊效果 html: 能源系統事業部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 1,899評論 0 1
  • 以下是常用的代碼收集,學習用。轉自豪情博客園 1. PC - js 返回指定范圍的隨機數(m-n之間)的公式 re...
    自由加咖啡閱讀 1,026評論 0 1
  • 學習,從來都是創造驚喜、創造好運的最優路徑。每個真正習得過技能的人終究有一天會發出驚嘆:真沒想到在這里可以用上!學...
    常拓閱讀 374評論 1 1
  • 我想問問大家個問題,你多久沒回家了? 我們每個人有的是為了自己的理想有的是為了自己人生中的目標也有的是為了家...
    梁慧燕閱讀 373評論 7 1