Wordpress教程 2023年04月18日
0 收藏 0 点赞 901 浏览 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

相关推荐
建站为什么选择WordPress?
作为一个WEB开发者,经常被问到建站应该选择什么软件?或者首选什么软件?这样的问题。我的答案是 WordPress 。不光因为 WordPr…
日期:2023-11-30 点赞:0 阅读:19
如何向WooCommerce导入产品(快速而简单的方法)
无论你是刚开始用WooCommerce开店,还是想加快向现有商店添加产品的进程,学习如何向WooCommerce导入产品都很重要。批量导入产…
日期:2023-11-29 点赞:0 阅读:26
WordPress建站教程:解决谷歌字体导致的网站卡顿问题
继续分享wordpress建站教程。悦然wordpress建站之前使用blocksy主题帮客户做了一个物流公司公司建设,网站的各方面都还不错…
日期:2023-11-22 点赞:0 阅读:28
WordPress外贸网站速度优化:如何选择性能优化插件?
使用wordpress建站时,我们一定要考虑到wordpress网站加速问题,因为网站打开速度太慢会影响到用户体验和谷歌SEO优化效果。一般…
日期:2023-11-22 点赞:0 阅读:23
什么是WordPress跨境电商AB站?
做过wordpress跨境电商网站的人应该都知道,支付收款是一个大问题,特别是Paypal封号比较严重,之前帐户清零的新闻还历历在目,其它的…
日期:2023-11-22 点赞:0 阅读:23
Custom Field Suite 修改woocommerce销量
Custom Field Suite 修改woocommerce销量
日期:2023-10-29 点赞:0 阅读:31 套餐
发表评论
暂无评论

还没有评论呢,快来抢沙发~