原创

js-iframe中的内容随着iframe的宽高自适应

<iframe style="overflow-x: auto;"  scrolling="no" id="iframeTest" name="iframeTest" onload="Javascript:SetiframeTestHeight(this)" src="https://code.jiangjiesheng.cn" id="jcdPop1" width="90%" 

height="100%" frameborder="no" border="0" marginwidth="0"  marginheight="0" ></iframe>

function SetiframeTestHeight(obj) {
	var iframeTest = obj;
	if(document.getElementById) {
	if(iframeTest && !window.opera) {
	    if(iframeTest.contentDocument && iframeTest.contentDocument.body.offsetHeight)
		 iframeTest.height = iframeTest.contentDocument.body.offsetHeight;
	else if(iframeTest.Document && iframeTest.Document.body.scrollHeight)
		iframeTest.height = iframeTest.Document.body.scrollHeight;
	  }
  }
}
//似乎src 必须同源，如果有非同源的情况，尝试设计一下代理来处理这个问题

应用：
让iframe的宽高和屏幕的宽高一致
https://gitee.com/jiangjiesheng/m.jiangjiesheng.cn index.html

<style type="text/css">
		body {
			margin: 0 !important;
		}
	</style>
	<script>
		function getScreenWidth() { //不随浏览器宽口大小变化而变化
			var _screenWidth = screen.width;
			return _screenWidth;
		}

		function getScreenHeight() { //不随浏览器宽口大小变化而变化
			var _screenHeight = screen.height;
			return _screenHeight;
		}

		function setIframeWidthHeight(obj) {
			var iframeTest = obj;
			iframeTest.width = getScreenWidth();
			iframeTest.height = getScreenHeight();
		}
	</script>
</head>

<body>
	<iframe style="overflow-x: auto;" scrolling="no" id="iframeTest" name="iframeTest" onload="Javascript:setIframeWidthHeight(this)"
	 src="https://tech.jiangjiesheng.cn/dev/" id="jcdPop1" width="90%" height="100%" frameborder="no" border="0"
	 marginwidth="0" marginheight="0"></iframe>
</body>

正文到此结束

所属分类：前端基础

本文标签： JavaScript
本文链接： https://code.jiangjiesheng.cn/article/87
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

js-iframe中的内容随着iframe的宽高自适应

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息