如何同步iframe與嵌入內容的高度

最近頻繁的作一些經過iframe在a頁面嵌入b頁面需求。總結下來，有如下問題須要解決

1.如何同步iframe與嵌入內容的高度

2.將b頁面載入到a頁面後，如何隱藏掉b頁面上的元素，如左導航，頂部導航等等

 

-如何同步iframe與嵌入內容的高度

a)獲取由iframe引入的頁面高度

contentWindow返回的是嵌入到中頁面的window對象。能夠經過這個window對象獲取到網頁的高度。contentWindow支持全部主流瀏覽器。

contentDocument返回的是嵌入頁面的document對象。

 

b)同步引入頁面與iframe的高度

 將獲取到的高度賦值給iframe

 demo

  <iframe src="http://jsbin.com/nobefis" id="currentFrame" width="100%" scrolling="no" frameborder="no"></iframe>
  
  <script>
      function resizeFrameHeight(currentFrame){
        if(currentFrame){
          var iframeObj = currentFrame.contentWindow;//獲取iframe引入網頁的window對象,進而經過window對象獲取引入內容的document對象
　　　　　　if(iframeObj.document.body){
            　　currentFrame.height = iframeObj.document.body.scrollHeight;
          }
        }
      }
    
      window.onload  = function () {
        resizeFrameHeight(document.getElementById("currentFrame"))
      }
  </script>

 

HTMLIFrameElement.contentWindow

window.frames

HTML IFrameElement

iframe

contentWindow for an iframe

js操做iframe裏的dom