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

相关推荐
//Woocommerce 用自定义按钮/链接替换添加到购物车按钮(作用于列表页) add_filter( 'woocommerce_loo…
日期:2024-05-12 点赞:0 阅读:43
如何从woocommerce 类目链接中去掉 Product-Category
比如要把这个类目链接: https://www.fobwebs.com/product-category/apple/ 改成: https:…
日期:2024-05-07 点赞:0 阅读:160
woocommerce 订单相关钩子
woocommerce_checkout_update_order_meta: 在订单元数据更新时触发。您可以在此钩子中更新订单的元数据,例…
日期:2024-03-15 点赞:0 阅读:403
最新Wp Rocket设置教程, 含插件下载+常见问题解决方法
最新Wp Rocket设置教程(超详细), 附GPL版本插件下载链接。图文并茂详细解释每一个设置的含义以及优缺点+兼容性排除,找到最合适的设…
日期:2024-02-24 点赞:0 阅读:333
WordPress破解版插件/主题(开心版, GPL, Nulled)安全吗?有啥缺点?如何获取?
解版插件产业链,安全与否,以及如何下载安全高质量破解版插件,避免下载有病毒主题/插件。 WordPress破解版插件/主题安全吗?这是绝大多…
日期:2024-02-24 点赞:0 阅读:326
终极WordPress速度优化教程, 秒开页面! 优化思路+方法+工具
终极WordPress速度优化教程,全面讲解影响速度的因素和原理。FCP, LCP, TTFB, TBT, CLS,Wp corn, Mar…
日期:2024-02-24 点赞:0 阅读:512
发表评论
暂无评论

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