防止多次下载同一文件

时间:2018-01-17 19:49:01

标签: javascript jquery html css html5

我正在使用下面的脚本来显示加载gif,同时文件已准备好下载,然后一旦完成,它会在几秒后隐藏。 但我只想下载文件一次,但是当我点击链接时,它会下载同一个文件两次。我在论坛的某个地方找到了代码,所以我真的不知道如何阻止它运行两次url。

   $(".file a").on("click",function(e){
  var originalHtml=$(this).html();
    $(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    var clickedLink=$(this);
    setTimeout(function() {
      clickedLink.html(originalHtml);
        window.location = destination;

    },2500);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location =sagar;
    }).attr('sagar', sagar);
});
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: darkblue;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black;  background-color: #EFF6E4;font-family: myFirstFont; ">



	  <ol class="tree">
    
    <li>
      <label for="folder1">First Semester</label> <input type="checkbox" id="folder1" /> 
      <ol>
        
        <li>
          <label for="subfolder11">Classical Mechanics </label> <input type="checkbox" id="subfolder11" /> 
          <ol>
            
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=1Q2Sr1ouPQ_P-i48tlRxcGctiMtlIbBwX">Solutions_to_Problems_in_Goldstein)</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=1GxWkj_oevSmxHFp4rDrNbvM5kBTaJ31B">Goldstein Solution Chapter 8 Soln</a></li>
<li class="file"><a href=" https://drive.google.com/uc?export=download&id=1f9wJftmvaI-B_jpYXPIk1rTbiHOJ-BzU">Goldstein Chapter 9 Soln</a></li>
            <li class="file"><a href=" https://drive.google.com/uc?export=download&id=1OXoTG3GmY3EhNBnPhXID4hHxzJUN-tGb">Numericals Jacobi Angle ( Hints )</a></li>
              <li class="file"><a href="https://drive.google.com/uc?export=download&id=1nD3ChGK-sMNpXbXXT394Fgu0xS1_aa35">Angle Jacobi Numericals ( Complete Solution)</a></li>
          </ol>
      </li>
  </ol>
</li>
</ol>
</body>

任何帮助都会非常感激。

1 个答案:

答案 0 :(得分:0)

window.location = destination;函数内部以及加载隐藏的iframe之后,您似乎正在调用setTimeout(触发浏览器下载文件)两次,我认为这是正确的位置。

请停止拨打setTimeout,如下所示:

$(".file a").on("click",function(e){
  var originalHtml=$(this).html();
    $(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    var clickedLink=$(this);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
        clickedLink.html(originalHtml);
    }).attr('src', destination);
});