Question

我用微调器创建了一个小程序。网址完全加载到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中，但是如果我在这里写错了，请纠正我。我还提供了一个屏幕打印，显示该页面已在后台加载，但微调框仍然存在。预先感谢。

Answer 1

我认为您的脚本未加载到html代码中，因此请尝试将html代码更改为该代码：-

data %>% mutate(name=case_when(
  is.na(a) ~ NA_character_, 
  a %in% c("a","b") ~ as.character(a), 
  TRUE ~ "other"))

Answer 2

您的JS很好。我不确定确切的错误是我在电脑上尝试了同样的错误，它似乎工作正常。我建议您将脚本放在body标签的末尾或overlay div的末尾，因为HTML会按行加载和解析，如果JS找不到您的overlay div，则会引发异常，并且代码会中断。

网址加载后如何使微调框消失

2 个答案: