在 div 中重新加载 html

Question

在我的 index.html 的正文中，我有一个图表（使用 d3.js 创建）和以下代码显示了一个步进器，该步进器的步数与单击的子节点的数量一样多节点：

  <div ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.html' || 'views/stepper-three-labs.html'"></div> 

所以我有两个 html 页面：stepper-two-labs.html 和 stepper-three-labs.html

加载步进器内容的函数如下：

var click = function (d){
       vm.numlab=d.children.length;
          $(document).ready(function(){
          for(var i=0; i<d.children.length; i++) {
            var lab=d.children[i].name;
            $('#iframe'+i).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
          }
      });
}

并在 stepper .html 中加载相应的内容（stepper-two-labs.html 和 stepper-three-labs.html）

当我单击具有 2 个子节点的节点时，它会以 2 个步骤加载步进器，当我完成时，如果我单击具有 3 个子节点的新节点，它会以 3 个步骤加载步进器。另一方面，如果我单击与前一个节点具有相同数量的子节点的节点，则 html 不会再次加载，因此内容会更新，但不会从初始步骤开始，因为页面不是从头开始加载，因为使用的是相同的 .html 页面（因为子节点的数量相同）。所以我寻找一种方法来解决这个问题，也许每次点击都会更新 index.html 中的 div。

Answer 1

您可以尝试先向 iframe 添加一个空源，然后添加您想要的链接，这样会强制 iframe 刷新。

    var click = function (d){
       vm.numlab=d.children.length;
          $(document).ready(function(){
          for(var i=0; i<d.children.length; i++) {
            var lab=d.children[i].name;
            $('#iframe'+i).attr('src', '');
            $('#iframe'+i).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
          }
      });