时间戳

首页 > 解决方案 > 刷新html页面内的元素

javascript - 刷新html页面内的元素

问题描述

我已经尝试了好几天，我迫切需要帮助，因为这是我为我的论文做的最后一件事。

我有一个index.html页面，里面有一个步进器和一个图表：

<html>
<style>
  #stepperTwoLabs {
    display: none;
}

  #stepperThreeLabs {
    display: none;
}
</style>

<head>

    <title>Training</title>
    <meta name="description">
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/architecturetree/css/tree.css" />
    
</head>

<body>
  <div id="graph"> <!-- View the graph-->
    <h1><i class="fa fa-book"></i> Training</h1>
    <p>&nbsp;</p>  
     
  <div id="stepperTwoLabs">
    <div class="stepp2">
    </br></br></br>
      <md-card ng-init="step2.disabled = true; step3.disabled = true; selected = 0">
        <md-steppers  md-selected="selected" md-stretch-steppers="always">
          <md-step label="Lab1" md-complete="step1.completed"> 
            <md-content>
              <iframe id="iframe0" name="myIframe0" frameborder="5" width="1500" height="1500"></iframe>
              <md-button type="submit" class="md-raised md-primary" ng-click="selected = 1; step1.completed=true; step2.disabled = false">NEXT</md-button>
            </md-content>
          </md-step>
          <md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2.disabled">
            <md-content>
              <iframe id="iframe1" name="myIframe1" frameborder="5" width="1500" height="1500"></iframe>
              <md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
              <md-button class="md-raised md-primary" ng-click="selected = 2; step2.completed=true; step3.disabled=false">NEXT</md-button>
            </md-content>
          </md-step>
          <md-step label="End" md-complete="step3.completed" ng-disabled="step3.disabled">
            <md-content>
              <h1>
              All done!
              </h1>
              <h5> </br> You have completed this training path. </br> You can go back through the labs or select another training.
              </h5>
              <md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button>
              <md-button class="md-raised md-primary" ng-click="step2.disabled = true; step3.disabled = true; selected = 0">START</md-button>
            </md-content>
          </md-step>
        </md-steppers>
      </md-card>
    </div>
  </div>

  <div id="stepperThreeLabs">
    <div class="stepp3">
    </br></br></br>
      <md-card ng-init="step2.disabled = true; step3.disabled = true; step4.disabled = true; selected = 0">
        <md-steppers  md-selected="selected" md-stretch-steppers="always">
          <md-step label="Lab1" md-complete="step1.completed">
            <md-content>
              <iframe id="iframe2" name="myIframe2" frameborder="5" width="1500" height="1500"></iframe>
              <md-button type="submit" class="md-raised md-primary" ng-click="selected = 1; step1.completed=true; step2.disabled=false">NEXT</md-button>
            </md-content>
          </md-step>
          <md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2.disabled">
            <md-content>
              <iframe id="iframe3" name="myIframe3" frameborder="5" width="1500" height="1500"></iframe>
              <md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
              <md-button class="md-raised md-primary" ng-click="selected = 2; step2.completed=true; step3.disabled=false">NEXT</md-button>
            </md-content>
          </md-step>
          <md-step label="Lab3" md-complete="step3.completed" ng-disabled="step3.disabled">
            <md-content>
              <iframe id="iframe4" name="myIframe4" frameborder="5" width="1500" height="1500"></iframe>
              <md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button>
              <md-button class="md-raised md-primary" ng-click="selected = 3; step3.completed=true; step4.disabled=false">NEXT</md-button>
            </md-content>
          </md-step>
          <md-step label="End" md-complete="step4.completed" ng-disabled="step4.disabled">
            <md-content>
              <h1>
              All done!
              </h1>
              <h5> </br> You have completed this training path. </br> You can go back through the labs or select another training.
              </h5>
              <md-button class="md-raised md-primary" ng-click="selected = 2">PREV</md-button>
            </md-content>
          </md-step>
        </md-steppers>
      </md-card>
    </div>
  </div>

</body>
</html>

步进器最初是隐藏的，但是当我单击其中的图形节点时，它变得可见并加载了几个要执行的实验。

.js里面的代码部分如下：（点击功能是.on event (click, click)使用d3.js启动的）

var click = function (d){
  document.getElementById('stepperTwoLabs').style.display='none';
  document.getElementById('stepperThreeLabs').style.display='none';
  if(d.parent.name == 'Buffer Overflow' || d.parent.name == 'Password Cracking' || d.parent.name == 'Denial of Service' ||
     d.parent.name == 'Privilege Escalation' || d.parent.name == 'Web Hacking' ) {
       vm.numlab=d.children.length;
       if (d.children.length==2) {
        document.getElementById('stepperTwoLabs').style.display='block';
        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);
      }
      } else if (d.children.length==3) {
        document.getElementById('stepperThreeLabs').style.display='block';
       for(var i=0; i<d.children.length; i++) {
        var lab=d.children[i].name;
        var j=i+2;
        $('#iframe'+j).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
          }
      }
    }
}

// Double click to scroll down in the page up to the stepper
var dblclick = function (d) {
  if (d.children.length==2) {
  $('html,body').animate({
    scrollTop: $(".stepp2").offset().top}, 'slow');
  }
  else if (d.children.length==3) {
    $('html,body').animate({
      scrollTop: $(".stepp3").offset().top}, 'slow');
  }
}

如果这是第一个步骤序列，因此是第一次单击，那么一切都很好，因为步进器是第一次加载。当我单击图表的新节点以加载要执行的另一组实验时，就会出现问题，因为步进器从末尾开始，或者更确切地说是从我之前停止的步骤开始。. 我想要确保，也许通过更新 index.html 中步进器的内容，我们可以在每次单击图形节点时从第一步开始。

当我开始另一个实验室时，它从最后开始，因为它们是在步进器中加载的（总是与 index.html 相同），并且它所处的状态是最后一步的状态。我可以通过插入这样的按钮从头开始：<md-button class = "md-raised md-primary" ng-click = "step2.disabled = true; step3.disabled = true; selected = 0"> START < / md-button>但问题是这必须通过单击节点来完成，而我对此无能为力（至少我认为）。基本上我知道为什么会发生这种情况并解决它你只需要刷新 html 的一部分。

谢谢！

标签： javascripthtmljqueryangularjs

解决方案

推荐阅读