iframe标签高度自适应解析,页面引入

- 作者:流年 -

iframe标签高度自适应解析,页面引入

第一种


  •css 可忽略 
<style>
#iframe-wrap {
    height: 100%;
    overflow: visible;
    position: relative;
    top: 54px;
#iframe {
    margin-top: 0;
  width: 100%;
}
  </style>

  •html 
 
<div id="iframe-wrap">
  <iframe id="iframe" name="iframe" width="100%"  frameborder="0" src="/website/index.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
</div>


  •js样式  
 
<script>
 var oIframe = window.top.document.getElementById("iframe");
    var oBody = document.getElementsByTagName("body")[0];
    oIframe.style.height = oBody.offsetHeight + 800 + 'px';
  </script>

 
第一种
 
页面头部加网页申明:

详见:
https://www.w3school.com.cn/tags/tag_doctype.asp
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
 
  •html 
  <iframe id="iframe" name="iframe" width="100%"  frameborder="0" src="/website/index.html" marginwidth="1" marginheight="1" vspace="0" hspace="1" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>

  •js样式  
 
<script>
 
        function iframeHeight() {
 
            document.getElementById('iframe').height="100%";
 
        }

  </script>