使用 js/jquery 遍历 html 文件列表以加载到 iframe

Question

我有一组 HTML 文件，我想通过 iframe 循环浏览这些文件，但我不太确定如何设置 javascript，因为我几乎没有体验它。这是我尝试让它发挥作用的尝试：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset = 'utf-8'>
    <title>Sankey Plot Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>

  <body>
    <iframe src = "plot1.html" width = 100% height = 100% id = "sankey"></iframe>
    <script type = "text/javascript">
      (function() {
        var selector = document.getElementById('sankey'),
        var delay_sec = 1,
        var num = 0,
        var len = 2;
        setInterval(function() {
          num = (num === len) ? 0 : num;
          selector.src = "plot" + num + ".html";
          num++;
        }, delay_sec * 50);
      }());
    </script>
  </body>
</html>

上面的代码是通过我在 SO 上看到的其他答案随意拼凑的。我以为这会很简单，比如（伪代码）：

<script>
  var counter = 0;
  for (i = 0, i < eternity, i++) {
    counter++;
    counter = (counter === 2) ? 0 : counter;
    var source = "plot" + counter + ".html";
    $("#sankey").load(source);
    sleep(2 seconds);
  }
</script>

我哪里错了？

与主要问题无关的附带问题：为什么在我的第一段代码中，js 代码中有逗号而不是分号？

Answer 1

// You should also only do DOM manipulation after DOM ready and the
//   easiest way to do that is to pass a function directly to jQuery
//   like so
$(function() {
    // I'm just guessing you mean to use jQuery since you included it
    //  #sankeyis the CSS syntax for selecting an element with the
    //  ID 'sankey' and jQuery uses CSS syntax for selecting elements
    var selector = $('#sankey');
    var delay_sec = 10;
    var num = 0,
        len = 2;
    setInterval(function() {
        num = (num === len) ? 0 : num;
        //this is how you set an attribute on a jQuery selector
        selector.attr('src', "plot" + num + ".html");
        num++;
    //the second argument to setTimeout/setInterval is in milliseconds
    }, delay_sec * 1000);
});

您可以在 JavaScript 中以某种列表格式定义变量，如下所示：

var i = 0,
    j = 1, 
    k = 2;

这相当于：

var i = 0;
var j = 1;
var z = 2;

这是语法错误：

var i = 0, var j = 1;

使用 js/jquery 遍历 html 文件列表以加载到 iframe

Using js/jquery to loop through a list of html files to load in an iframe

html

javascript

iframe

jquery