Wordpress教程 2023年04月18日
0 收藏 0 点赞 786 浏览 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 在购物车中的特定产品的WooCommerce结帐上显示某些国家/地区
要在 WooCommerce 结账页面上只显示特定的国家/地区,您可以使用以下代码在函数文件(functions.php)中添加相应的过滤器…
日期:2023-05-29 点赞:0 阅读:920
最新一键关闭WordPress后台主题、WordPress插件的自动更新提醒,禁止WordPress更新提醒
PHP版本低于7.2用这个代码: 将以下代码放入您的主题functions.php //修改代码在后台显示更新 add_filter('pr…
日期:2023-05-24 点赞:0 阅读:172
wordpress相关文章功能代码示例
本文来介绍下wordpress的相关文章功能实现代码。 首先还是来说明下这个相关文章是个什么逻辑,文章的相关性都是通过tag标签来关联的,如…
日期:2023-05-23 点赞:0 阅读:935
woocommerce添加结账页面缩略图和货号+购物车页面货号
购物车上添加图片和货号SKU functions.php文件里面添加: /** * Display SKU in cart table wi…
日期:2023-05-18 点赞:0 阅读:1,052
codestar-framework获取后台设置控制指定分类文章和显示数量
可以在主题模板中使用 _izhanke() 函数获取后台设置的 xinwen_num 字段的值,然后将其传递到 query_posts() …
日期:2023-05-10 点赞:0 阅读:999
怎么指定邮箱可注册?
一些做会员网站的站长,肯定很讨厌那种用临时邮箱注册的用户吧,这次分享一段WordPress代码,让用户只能用指定的邮箱注册。 在主题根目录下…
日期:2023-05-09 点赞:0 阅读:694
发表评论
暂无评论

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