我有一个按钮，当您单击它时，它会显示一个加载 div 并打开一个加载 html 的新选项卡。我想在新选项卡中加载 html 时隐藏此 div。我尝试了很多方法来隐藏这一点，但没有人有效，我可以提供帮助吗？我是 html、javascript、ajax、jquery 开发的新手。
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
00% { transform: rotate(360deg); }
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("div").show();
var win = window.open("new2.html");
});
});
</script>
</head>
<body>
<button id="show">Show</button>
<center>
<div id="loadingImage" style="display:none;">
<div id="white-background"></div>
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</center>
</div>
</div>
</center>
</body>
</html>
最佳答案
如果您的浏览器处于加载状态，则无法取消加载。因此，您可能会要求 google 或 mozilla 将其删除；)它只是显示，因为您的新窗口无法加载页面。打开一个窗口就像打开一个新浏览器一样。如果没有“http://whatever ”，它将显示错误 404 或在某些情况下显示此“ Logo ”。因此，如果您使用完全限定的 URL，则不会显示任何内容。您的代码还有一些问题。 1.) jquery 被贬低并且杀伤力过大 2.) 在您了解 javascript 的基础之前，不要使用此类库! 3.) 你应该使用 chrome 作为开发浏览器 - 使用 F12 它会打开一个不错的 IDE，它也可以清理你困惑的 HTML 代码;) 有一些 div 没有正确嵌套。会混淆 javascript 和 css。
<!DOCTYPE html>
<html>
<style>
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
00% {
transform: rotate(360deg);
}
}
#white-background {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox {
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
}
</style>
<head></head>
<body>
<button id="show" onclick="javascript:winopen('new2.html');">Show</button>
<div id="progress" style="display:none;">
<div id="white-background">
<center>
<div id="dlgbox">
<div class="loader"></div>
<h1>Loading...</h1>
</div>
</center>
</div>
</div>
<script>
//if you load or put scripts at the end the DOM (direct before </body>) the
//page html is already loaded so no need
// for onload tricks The page is already ready here.
var win;
var progress;
var baseurl = ""
baseurl = window.location.href;//current page location
//current url
url = baseurl.split("/");
//remove current filname by split to array
url.pop();
//remove last array element
baseurl = url.join("/");
// join rest of array
console.log(baseurl);
function winopen(page) {
progress = document.getElementById("progress");// get the div by its id
//i have put the file in the same directory. i gues you has to change "/" to "/YOUR_SUBDIRECTORY e.g. /test//"
var href = baseurl + "/" + page; //create new url for the window open thing
progress.style.display = "block";// show the progress info
win = (window.open(href)); // open the window
progress.style.display = "none;"; // it's loaded hide the progress info
}
//bonus trick:
function content_manager(showme_id,hideme_id) {
document.getElementById(hideme_id).style.display="none";
document.getElementById(showme_id).style.display="block";
}
</script>
</body>
</html>
你拥有我一瓶啤酒；)顺便说一句:你可能看不到你的加载阶段。速度太快了，看不清。注释掉隐藏部分或使用 chrome 调试器来查看发生了什么:) 将事物居中:center a info box您还可以阅读有关 z-index css 属性的信息。您可以通过宽度为 100% 高度为 100% 的 div 隐藏整个页面，具有固定位置并且 z-index: 2;所以你把加载信息放在页面上并完全隐藏页面。您可以使用 rgba(1,1,1,.5) 作为背景颜色使其半透明;)
关于javascript - HTML - 如何在新选项卡加载时隐藏正在加载的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57858394/