去掉iframe边框并且自适应高度

Posted 野生java研究僧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了去掉iframe边框并且自适应高度相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<style type="text/css">
	
	.iframeBoxbg
	    width:100%;
	    border: 0px;
	    height:100%;
	    background:#f3f3f3;
	    overflow: visible;
	
	.iframeBox
	    width: 82%;
	    margin-left: 9%;
	    border: 0px;
	    height:100%;
	    
	
</style>
 <div  class="iframeBoxbg">
      <iframe
           
            title="resg"
            id="ifr" 
            class="iframeBox" 
         	src="https://www.vcg.com/creative-image/zhongqing" 
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
            scrolling="no"
            frameBorder="0"
          ></iframe>
      </div>


		<script type="text/javascript">
			
			window.onload = function () 
			  var height = calcPageHeight(document)
			  document.getElementById('ifr').style.height = height + 100 + 'px'
			
			
		    // 计算页面的实际高度,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 
		    
	 
	
		</script>
	</body>
</html>

以上是关于去掉iframe边框并且自适应高度的主要内容,如果未能解决你的问题,请参考以下文章

去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

html内嵌iframe网页高度自适应

iframe自适应高度的多种方法

iframe自适应高度设置(iframe自适应高度和宽度)

如何让iframe自适应高度

vue下iframe怎么自适应高度