Question

我正在体内使用onload条件来隐藏预加载器，并在页面加载后显示iframe。在台式机上运行正常，但在移动设备（android）上运行不正常。

我尝试了其他用于预加载器的方法，但是它们不起作用。所以我想出了这个解决方案：

为iframe包装，其可见性最初设置为隐藏
制作带有初始显示的背景动画的预加载器div
负上边距等于iframe
使用onload条件：将预加载器的显示设置为无，并将iframe包装器的可见性设置为可见

它在台式机上就像超级按钮一样起作用，但在移动设备上却不起作用。我加入了alert并可以正常工作，因此触发了条件，但是显示和可见性设置不受影响。

我也尝试了document.getElementById("xxxx").hidden = true，但它也没有用。

CSS

#preloader2 {
background:url( ../ajax-loader.gif) center center no-repeat;
min-height:400px;margin-top: -1500px;
}
#iframewrapper {
visibility: hidden;
}

HTML

<body onload="preloader">
<iframe id="iframewrapper" src="https://example.com" width="100%"   height="1500px" scrolling="no" allowfullscreen="allowfullscreen">
</iframe>
<div id="preloader2">
</div>
<script>
function preloader() {
alert("Page is loaded");
document.getElementById("preloader2").style.display = "none";
document.getElementById("iframewrapper").style.visibility = "visible"; 
}
</script>
</body>

我想让此脚本在移动浏览器上运行。

这是一个带有实际问题的测试页：

https://autocenterbol.nl/tst/test-wrapper/

显示和隐藏元素可在台式机上使用，但不能在移动设备上使用

0 个答案: