如何让微调器在加载url后消失？
如何让微调器在加载url后消失？
提问于 2018-07-13 04:35:22
我已经创建了一个带有旋转器的小程序。一旦url完全加载到iframe中，旋转器就会消失。我可以让页面加载，但不能让微调器消失。
下面是我的javascript代码(我不确定style.display='none‘行是否有效：
var overlay = document.getElementById("overlay");
window.addEventListener('load', function(){
overlay.style.display = 'none';
})下面是我的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630" src="https://tommcfarlin.com/check-if- a-page-is-in-an-iframe/" frameborder="0" allowfullscreen></iframe>
<script src="script.js" type="text/javascript"></script>
</body>
</html>下面是我的CSS代码：
body{
width: 100%;
height: 100%;
overflow: hidden;
}
.spinner{
width: 80px;
height: 80px;
border: 2px solid #f3f3f3;
border-top:3px solid #f25a41;
border-radius: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
margin: auto;
animation: spin 1s infinite linear;
}
@keyframes spin {
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
#overlay{
height:100%;
width:100%;
background:rgba(0, 0, 0, .8);
position:fixed;
left:0;
top:0;
} 我认为我的问题在Javascript中，但如果我在这里错了，请纠正我。我还包含了一个屏幕打印，显示页面在后台加载，但微调器仍然在那里。提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-13 04:54:02
我认为您的脚本没有加载到您的html代码中，所以尝试将您的html代码更改为该代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
<script>
window.onload = function(){
var overlay = document.getElementById("overlay");
overlay.style.display = 'none';
};
<script>
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630"
src="https://tommcfarlin.com/check-if- a-page-is-in-
an-iframe/" frameborder="0" allowfullscreen></iframe>
</body>
</html>Stack Overflow用户
发布于 2018-07-13 04:58:02
你的JS很好。我不确定确切的错误是什么，我在我的pc上尝试了同样的方法，似乎工作得很好。我建议你把你的脚本放在body标签之前或者overlay div结尾之后，因为HTML是按行加载和解析的，如果JS找不到你的overlay div，它就会抛出一个异常，代码就会中断。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51314040
复制相关文章
相似问题