Question

我需要一个脚本，以每隔一定的秒数更改iframe src。每次更改之间的时间不同。

示例：页面加载 Google.com已加载。 15秒后 Yahoo.com已加载。 37秒后 Ask.com已加载。 12秒后 Dogpile.com已加载。等等等等。

我尝试过：

<html>

<head>
    <meta charset="utf-8" />
    <title>Monitor Presidência</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>

<body>
    <div style="width: 100%; display: flex;">
        <div class="ui teal progress" data-percent="0" id="example1" style="width: 90%;margin-bottom: 0px">
            <div class="bar"></div>
        </div>

        <div class="ui icon buttons" style="width: 10%">
            <button class="ui button" style="width: 25%" onclick="menos_um()">
                <i class="left chevron icon"></i>
            </button>
            <button class="ui button " style="width: 25%" onclick="inicia()">
                <i class="play icon"></i>
            </button>

            <button class="ui button" style="width: 25%" onclick="para_aplicacao()">
                <i class="pause icon"></i>
            </button>

            <button class="ui button" style="width: 25%" onclick="mais_um()">
                <i class="right chevron icon"></i>
            </button>
        </div>
    </div>


    <iframe id="envase" class="frame_mon" style="width: 100%;height: 100%;" src="www.google.com.br"></iframe>
    <iframe id="frete_hl" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.yahoo.com.br"></iframe>
    <iframe id="frete_hl_acum" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.terra.com.br"></iframe>



</body>
<script>
    var arr_monitores = ["envase", "frete_hl", "frete_hl_acum"];
    var num_monitor = 0;
    var progresso = 0;
    var myVar;

    var setintervalatualizaframe;


    function mais_um() {

        /*  if (num_monitor === 2) {
              num_monitor = 0;
          } else {
              num_monitor++;
          }

          $('.frame_mon').css('display', 'none');
          document.getElementById(arr_monitores[num_monitor]).style.display = "";*/

        progresso = 100;
        myStopFunction();
        inicia();
        /*  if (num_monitor === 2) {
              num_monitor = 0;
          } else {
              num_monitor++;
          }*/

    };

    function menos_um() {
        //progresso = 100;

        if (num_monitor === 0) {
            num_monitor = 2;
        } else {
            num_monitor--;
        }

        $('.frame_mon').css('display', 'none');
        document.getElementById(arr_monitores[num_monitor]).style.display = "";
        progresso = 0;
        myStopFunction();
        inicia();


    };

    function inicia() {
        clearInterval(setintervalatualizaframe);

        myStopFunction();
        myVar = setInterval(function () {
            if (progresso === 100) {
                progresso = 0;

                if (num_monitor === 2) {
                    location.reload();
                    //num_monitor = 0;
                } else {
                    num_monitor++;
                }
                $('.frame_mon').css('display', 'none')
                document.getElementById(arr_monitores[num_monitor]).style.display = "";
            };



            progresso++;
            progresso++;
            $('#example1').data('percent', progresso);
            $('#example1').progress();
        }, 3800);
    }

    function myStopFunction() {
        clearInterval(myVar);
        //atualiza_frame();
    }
    inicia();

    function para_aplicacao(){
        clearInterval(myVar);
        atualiza_frame();
    }

    function atualiza_frame() {
        clearInterval(setintervalatualizaframe);
        setintervalatualizaframe = setInterval(function () {
            document.getElementById(arr_monitores[num_monitor]).src=document.getElementById(arr_monitores[num_monitor]).src;
        },1);
    }
</script>

</html>

Answer 1

您使用setInterval和setTimeout的方式不正确已处理，因为它创建了一个计时器ID来调度执行。 0
一种更有效的方法是使用Promises异步库，如下所示。 1

对于无法正常运行的网站，他们使用的响应标头不允许将其页面陷害。您可以使用某些后端程序来解决此问题，在该程序中，服务器将加载Web文件，然后将其转发。 2

<!DOCTYPE html>
<html>
  <head>
    <title> Hello </title>
    <style>
        iframe {
            display: block;
            width: 1000px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
          }

          iframe:focus {
            outline: none;
          }

          button {
            display: block;
            margin: auto auto;
          }

          label {
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          input {
            display: block;
            margin: auto auto;
          }
    </style>
  </head>
  <body>
    <div id='main'>
      <button id='wait' onclick='wait()'>Wait</button>
      <label>Seconds</label>
      <input type='number' id='seconds' placeholder='milliseconds'>
      <button id='switching' onclick='webSwitch()'>Switch sites</button>
      <iframe id='switchMe' src='https://codepen.io'></iframe>
    </div>
    <script>
      //Array of webpages
     var webList = ["https://www.bing.com", "https://www.walmart.com","https://www.codepen.io"];
     //For tracking position in array
     var count = 0;

     //Function to be ran by event
     function webSwitch() {
        console.log('I have been called');
       if (count >= webList.length) {
         count = 0;
       }
       //Setting new URL
       document.getElementById('switchMe').src = webList[count];
       //Make sure to use next URL
       count++;
     }

     function wait() {
        console.log('Click!');
        var numMS = document.getElementById('seconds').value;
        sleep(numMS).then(() => {
            webSwitch();
        })
     }

     function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
     }
    </script>
  </body>
</html>

更改iframe HTML

1 个答案: