更改 iframe HTML答案

【问题标题】：Changing Iframes HTML更改 iframe HTML
【发布时间】：2018-08-15 16:31:26
【问题描述】：

我需要一个脚本来每隔一定的秒数更改 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>

【问题讨论】：

到目前为止你尝试了什么？
欢迎来到 SO，你能把你的代码添加到 sn-p 中吗？
我已经尝试过该代码，但它同时更改了 iframe：

标签： javascript html css iframe

【解决方案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 有独立的时间自动切换？
如果您希望它们具有时间的独立变量，我可以在现场想到一个数组客户端，用于存储每次的时间和一个按 id 的 iframe 数组。通过更新功能将两者匹配在一起，该更新功能会在页面上不断刷新以查找更改。调用一个函数来同步 iframe 和时间。本质上，您需要将 id 和时间分开存储。然后调用你的同步函数，它也可以调用你的 switch 函数。由于 JS 类没有类变量，这是我能想到的唯一方法，除非你找到一种使用类方法的方法。
你能给我举个小例子吗？
我建议阅读原型系统。这对上面的代码有所帮助，并且已经发展到允许与类 var 类似的东西。如果一个对象是用原型制作的，那么个人时间和网站集可能会被赋予具有特定 ID 的 iframe。