Проверьте, существует ли файл, если нет, то укажите спецификацию c div

Question

Я использую функцию onclick show, чтобы выполнить sh следующую последовательность ..

1. Onclick, div с содержимым появится на 5 секунд
2. Через 5 секунд старый div скрывается и появляется новый div с содержимым

function show() {
    document.getElementById("myDiv").style.display="block";
    setTimeout("hide()", 5000);  // 5 seconds
}

function hide() {
    document.getElementById("myDiv").style.display="none";
    show2();
}

function show2() {
    document.getElementById("Div2").style.display="block";
}

Я хочу добавить еще один шаг здесь ...

Нажмите, проверьте, существует ли текстовый файл на веб-сайте, и в то же время отобразите div в течение 5 секунд. Отобразите спецификацию c div, если файл не существует Показать другой div, если файл существует

Answer 1

Проверить, существует ли файл или нет, можно с помощью success и fail обратных вызовов jQuery $.get метод, см. фрагмент ниже.

Обратите внимание , что в этом фрагменте ни один URL не будет когда-либо загружать что-либо, потому что (a) URL-адреса недействительны, и (b) даже с действительными URL-адресами , настроенные политики CORS домена stacksnippets.com делают любые запросы Ajax невозможными для успешного выполнения. Это означает, что при запуске вы увидите только сценарий fail.

CORS также может быть важным фактором для вашего собственного домена.

Также обратите внимание, что у вас будет чтобы поместить show/hide a certain DIV logi c в функции обратного вызова success и fail, или, по крайней мере, вам нужно будет вызвать соответствующий код оттуда.

var url1 = "https://YourDomain.com/Exists.txt";
var url2 = "https://YourDomain.com/DoesNotExist.txt";

HideAll();

function HideAll() {
  $("#divExists").hide();
  $("#divNotExists").hide();
}

function Check(url) {
  HideAll();
  $.get(url,
    function(response, status, jqXhr) {
      $("#divExists").show().html("<b>" + url + "</b> OK");
    }
   )
   .fail(function(response, status, jqXhr) {
      $("#divNotExists").show().html("<b>" + url + "</b> Not found");
    }
   );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="Check(url1)">Check URL 1</button>
<button onclick="Check(url2)">Check URL 2</button>

<div id="divExists"></div>
<div id="divNotExists"></div>

Answer 2

@ Питер сказал правильно. CORS помешает вам выполнить то, что вы хотите. Это можно легко сделать, если вы хотите сделать это самостоятельно.

Вам потребуется добавить еще один div и функцию.

var url1 = "https://YourDomain.com/Exists.txt";


 HideAll();

 function HideAll() {
 $("#divExists").hide();
 $("#divNotExists").hide();
 }

 function Check(url) {
 HideAll();
 $.get(url,
 function(response, status, jqXhr) {
  $("#divExists").show().html("<b>OK");
  show1();
 }

 )
 .fail(function(response, status, jqXhr) {
  $("#divNotExists").show().html("<b>Not found");
 }
 );
 }

<button onclick="Check(url1)">Check URL 1</button>
  <script type = "text/javascript">
  function show1() {
  document.getElementById("myDivv").style.display="block";

  }

  function show() {
  document.getElementById("myDiv").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
  }

  function hide() {
  document.getElementById("myDiv").style.display="none";
  show2();
  }

  function show2() {
  document.getElementById("Div2").style.display="block";
  }
  </script>

  

, а затем ....

  <button onclick="Check(url1)">Check URL 1</button>
  <script type = "text/javascript">
  function show1() {
  document.getElementById("myDivv").style.display="block";

  }

  function show() {
  document.getElementById("myDiv").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
  }

  function hide() {
  document.getElementById("myDiv").style.display="none";
  show2();
  }

  function show2() {
  document.getElementById("Div2").style.display="block";
  }
  </script>

  <div id = "myDivv" style="display:none"><input type = "button" value = "Proceed" onclick = "show()"><br>clicking above will launch 5 sec div</div>



   <div id = "myDiv" style="display:none">This is show()</div><br>
   <div id="Div2" style="display:none">This is show2()</div>