iframe高度自适应及隐藏滚动条亲测

觅站网官方 Wordpress教程 2023年04月18日

0 收藏 0 点赞 1,126 浏览 2195 个字

在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。

高度自适应

<iframe src="https://www.mizhanw.com/" id="myiframe"  frameborder=no scrolling="yes"  style=" overflow-x:scroll; overflow-y:hidden; " width="100%" ></iframe>

<script type="text/javascript" language="javascript">
    var ifm= document.getElementById("myiframe");
    ifm.height=document.documentElement.clientHeight;
</script>

高度自适应并且隐藏滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
		<script type="text/javascript">
			function showS() {
				document.getElementById("test").scrolling = "yes";
				document.getElementById("test").style.overflow = "scroll";
			}

			function hideS() {
				document.getElementById("test").scrolling = "no";
				document.getElementById("test").style.overflow = "hidden";
			}

			function loadIframe() {
				var iframe = document.getElementById("test");
				iframe.src = "https://www.mizhanw.com/";//自定义地址

				if (iframe.attachEvent) {
					iframe.attachEvent("onload", function() {});
				} else {
					iframe.onload = function() {};
				}
			}
		</script>
	</head>
	<body onload="loadIframe()">
		<div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="width: 100%; height: 100%;">
			<iframe id="test" width="100%" height="100%" frameborder="0" src="" style="margin:0px;"></iframe>
		</div>
		<style>
			.ifr {
				width: 600px;
				height: 600px;
				background: #fff;
				overflow: hidden;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
			}
		</style>
	</body>
</html>

如果需要多域名随机调用，下面是我改过的代码。

<script type="text/javascript">
    var urls = [
        "https://www.mizhanw.com/",
        "https://www.mizhanw.com/",
        "https://www.mizhanw.com/",
        "https://www.mizhanw.com/"
    ];
    
    function showS() {
        document.getElementById("test").scrolling = "yes";
        document.getElementById("test").style.overflow = "scroll";
    }
    
    function hideS() {
        document.getElementById("test").scrolling = "no";
        document.getElementById("test").style.overflow = "hidden";
    }
    
    function loadIframe() {
        var iframe = document.getElementById("test");
        var randomIndex = Math.floor(Math.random() * urls.length);
        iframe.src = urls[randomIndex];
        
        if (iframe.attachEvent){
            iframe.attachEvent("onload", function(){
                // hideS();
                // document.getElementById("loading").style.display="none";
            });
        } else {
            iframe.onload = function(){
                // hideS();
                // document.getElementById("loading").style.display="none";
            };
        }
    }
</script>

赏

微信扫一扫

支付宝扫一扫

版权：转载请注明出处：https://www.mizhanw.com/blog/2128.html

觅站网官方

管理员