Question

我正在研究一个页面，该页面读取json数据并动态创建一个表，其中包含来自JSON数据的URL列表。

现在此表数据应作为目录显示在iframe中，并且当用户单击任何URL时，它应将页面加载到相同的iframe中，并且用户可以浏览页面通过下一个和上一个按钮。

我写了一个代码来读取json数据和动态创建表。我在向iframe目录中显示此表数据时遇到问题。

<body onload="CreateTableFromJSON()">
  <p id="showData"></p>
</body>

<script>
  function CreateTableFromJSON() {
    var myTemplates = [
      {
        "Name": "Template 1",
        "url": "http://www.w3schools.com"
      },
      {

        "Name": "Template 2",
        "url": "http://www.google.com"
      }
    ]

    var col = [];
    for (var i = 0; i < myTemplates.length; i++) {
      for (var key in myTemplates[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // TABLE ROW.
    var tr = table.insertRow(-1);
    var tbIndex = 1;
    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myTemplates.length; i++) {
      tr = table.insertRow(-1);
      var tabCell = tr.insertCell(-1);
      //tabCell.innerHTML = tbIndex + ". "+  myTemplates[i].Name + myTemplates[i].url;
      tabCell.innerHTML = tbIndex + ". " + '<a href="' + myTemplates[i].url + '">' + myTemplates[i].Name + '</a>';
      tbIndex++;
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
  }
</script>

如何在同一iframe中加载链接列表

0 个答案: