頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

推薦幾款完美實現iframe高度自適應

布局 HTML我幫您 1月前  次瀏覽
 

iframe自適應內容大小


iframe自適應內容大小,支持跨域檢測內容大小改變窗口大小,支持多個iframe嵌套,提供一系列的頁面大小的計算方法來支持復雜的CSS布局, 檢測到窗口大小調整可以使網頁CSS動畫和過渡調整大小事件, 提供自定義的大小和滾動的方法. iFrameResize( [{options}], [css selector] || [iframe] ); $('iframe').iFrameResize( [{options}] );


iframe響應式插件Pym.js(推薦)

Pym.js可以讓你在嵌入ifram 的時候可自動的對iframe的大小進行調整以適應父一層容器,自適應式網站時,此插件很好幫助我們解決顯示問題,并且可以避免跨域問題。 iframe響應式插件Pym.js(推薦)

支持瀏覽器: Internet Explorer 9, 10 , 11 Chrome 32 (Mac 10.9) Firefox 26 (Mac 10.9) Safari 7 (Mac 10.9) iOS 7 Safari iOS 7 Chrome Android 4.4 Chrome


其實iframe高度自適應自適應的原理差不多如下

iframe 嵌套界面自適應是一個比較常見的功能需求,使用原生的 JS 編寫,適用于 chrome,firefox,IE 瀏覽器,原理差不多下面是代碼部分。

script>

  // 計算頁面的實際高度,iframe自適應會用到

  function calcPageHeight(doc) {

      var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

      var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

      var height  = Math.max(cHeight, sHeight)

      return height

  }

  //根據ID獲取iframe對象

  var ifr = document.getElementById('main')

  ifr.onload = function() {

  	  //解決打開高度太高的頁面后再打開高度較小頁面滾動條不收縮

  	  ifr.style.height='0px';

      var iDoc = ifr.contentDocument || ifr.document

      var height = calcPageHeight(iDoc)

      if(height < 850){

      	height = 850;

      }

      ifr.style.height = height + 'px'

  }

</script>

相關鏈接

發表評論

腾讯彩票兑奖