zoukankan      html  css  js  c++  java
  • 如何同步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

  • 相关阅读:
    杂题
    jzoj5679
    CF434E
    jzoj6152
    jzoj6150
    mysql 第06章 运算符
    mysql 第05章 数据类型
    mysql 第04章 SQL语句
    mysql 第03章 体系结构
    mysql 第02章 基本操作
  • 原文地址:https://www.cnblogs.com/mrdooo/p/6628654.html
Copyright © 2011-2022 走看看