Question

我有一个项目，我正在创建一个微调器页面，但是在重定向到URL时，我难以集成微调器页面。基本上我有一个乘法程序。如果答案正确，则提示正确并转到特定的URL（http://stackoverflow.com），如果答案不正确，则转到另一个URL（http://yahoo.com）。在实际转到那些页面之前，我希望我创建的微调器在页面加载时首先显示。有人可以帮我弄这个吗？预先感谢。

这是我的主要HTML页面（index1.html）：

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <meta charset="ISO-8859-1">
    <title>A Multiplication Game</title>
    </head>

    **<script>
    window.addEventListener("loader", function(){
    var spinner=document.getElementById("spinner");
    document.body.removeChild(load_screen);
    });
    </script>**

    <body >
    <span id="mathprompt">What is <span id="num1">8</span> multiplied by 
    <span id="num2">E</span>?
    </span>
    <br>
    <span id="inputrow">
        <input type="text" id="inputfield">
        <button id="submitbutton">Submit</button>
    </span>

   **<div class="loader" id="spinner"></div>**

   <p id="response"></p>

   <script src="script.js" type="text/javascript"></script>
   </body>
   </html>

这是我的JavaScript代码（script.js）。如您所见，我已经将spinner声明为变量，但是不确定是否应该在此处或在HTML中使用该函数：

 var num1;
 var num2;
 var guess;
 var answer;
 var response;

 $(document).ready(function() {
 num1=document.getElementById("num1");
 num2=document.getElementById("num2");
 guess=document.getElementById("inputfield");
 response=document.getElementById("response");
 **spinner=document.getElementById("spinner");**

 $("#submitbutton").click(function(){
    checkAnswer();
    redirectPage();

 });

 setNumbers();
 });

 function setNumbers(){
 num1.innerHTML = Math.floor(Math.random() * 10)+1;
 num2.innerHTML = Math.floor(Math.random() * 10)+1;
 }

 function checkAnswer(){
 var n1 = parseInt(num1.innerHTML);
 var n2 = parseInt(num2.innerHTML);
 answer = n1 * n2; 

 if (parseInt(guess.value) == answer){
    response.innerHTML = "Correct!";
 } else
    response.innerHTML = "Incorrect!";
 }

 function redirectPage(){
    if (parseInt(guess.value) == answer){
    window.location.href = "http://stackoverflow.com";
    } else{
    window.location.href = "http://yahoo.com";
    }
  }

这是css（stylesheet.css）中微调器的代码：

    @charset "ISO-8859-1";

  #inputrow{
  background-color:#80ff80;
  }

 #mathprompt{
 font-size: 34px;
 color:orange;
 text-align: center;
 }

 #response{
 font-size: 34px;
 color:white;
 text-align: center;
 }

 body {
 background-color: #8080c0;
 text-align: center;
 }

**.loader{
    border:16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db; 
    width: 240px;
    height: 240px;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
  }
    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
 }**

Answer 1

您似乎想检测到外部网站已加载...您无法检测到此情况，在Javascript中，您将无权访问在浏览器的新标签页中加载的外部网站的“已加载”事件。

您所能做的就是显示负载，然后在javascript中执行“重定向”。并且当yahoo / stackoverflow页面将被加载（在浏览器选项卡中替换了您的网站）时，您的加载器显然已经消失了……这就是您想要的吗？

您有3种情况：

如果您在嵌入到页面的iframe中加载yahoo / stackoverflow，可以，您可以显示加载并检测该页面已在iframe中加载（例如，您在iframe中加载了自己的页面，您可以在JS中访问页面的内容...在iframe中加载Yahoo / Stackoverflow，然后在JS中无法访问iframe内容时，这意味着外部页面已加载...）
如果要重定向到yahoo / stackoverflow页面，则只能在外部页面开始加载之前显示加载...
您可以尝试预取外部页面，显示加载，然后在加载页面时重定向到该页面...您的浏览器将缓存我认为的几乎所有html元素（以检查）...
```
var myPrefetchedPage;
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    myPrefetchedPage = html;
  }
})
```

在iframe中预加载代码：

jQuery(document).ready(function ($) {
    $app = $('.app');
    $app.addClass('loading');

    $iframe = $('<iframe>');
    $iframe.attr({src: 'http://www.yahoo.fr/'});
    $iframe.appendTo($('body'));

    // When <iframe> has been loaded, remove loading spinner to reveal <iframe> 
    // or redirect to the page in your browser tab.
    $iframe.load(function() {
        $('.app').remove();
        // redirect to the real page
        window.location.href='http://www.yahoo.fr/';
    });
});

如何将微调器页面与HTML的其余部分集成

1 个答案: