javascript - 如何将微调页面与其余 HTML 集成-6ren

javascript - 如何将微调页面与其余 HTML 集成

转载作者：行者123 更新时间：2023-11-30 14:30:35

我有一个元素，我正在创建一个微调器页面，但我在重定向到 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)。如您所见，我已将微调器声明为一个变量，但不确定我是否应该在此处或在 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); }
 }**

最佳答案

您似乎想要检测外部网站是否已加载...您无法检测到这一点，在 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/';
    });
});