Обработка скриптов при загрузке страницы через Ajax - PullRequest
1 голос
/ 27 февраля 2020

Есть ли способ обрабатывать скрипты, загружаемые через Ajax вызовы страницы? Я не хотел бы загружать те, которые уже загружены в первую очередь базовой страницей, поскольку они находятся в конфликте.

Это решение для создания нескольких страниц, одна для обычного вызова (со сценариями), одна для ajax единиц (без дублирующих скриптов)?

Пример:

base_page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>

  <div id="ajax_page"> </div>

  <div id="other_ajax_call"> </div>
  <div id="second_result"> </div>

  </script>
    $(document).ready(function(){
      $.ajax({
        url: '/ajax_page',
        type: 'GET',
        success: function (result) {
          $('#ajax_page').html(result)
        }
      });
    });


    $( "#other_ajax_call" ).on( 'click', function() {
      $.ajax({
        url: '/another_page',
        type: 'GET',
        success: function (result) {
          $('#second_result').html(result)
        }
      });
    });

  </script>
</body>
</html>

ajax_page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>

  <div id="ajax_second_page"> </div>

  </script>
    $(document).ready(function(){
      $.ajax({
        url: '/a_third_page',
        type: 'GET',
        success: function (result) {
          $('#ajax_second_page').html(result)
        }
      });
    });

  </script>
</body>
</html>

В этом примере на 'base_page' я загружаю через Ajax 'ajax_page', который сам использует Ajax (эта страница обычно вызывается без Ajax и, следовательно, потребуется сохранить скрипт).

Проблема в том, что когда это сделано, сценарии jquery конфликтуют, и второй ajax вызов 'base_page' (для "#other_ajax_call") не работает, и я получаю следующее исключение:

Uncaught TypeError: $. ajax не является функцией

Это перепечатка вызова Ajax - страница загрузки сценарий только в том случае, если его нет на базовой странице , которая была закрыта, поскольку я сначала не указал достаточно подробностей, и мой вопрос был недостаточно ясен, и у меня нет возможности открыть его снова.

1 Ответ

1 голос
/ 27 февраля 2020

Так как вы все равно получаете полные страницы, не имеет смысла делать это с ajax, особенно, когда оно прерывается HTML. Что вы можете сделать, это использовать iframe для отображения ваших страниц, а затем управлять ими с помощью простого javascript в родительском документе.

Например:

<!-- iframe for one of your pages -->
<iframe id="page-foo-iframe"
    title="page foo"
    width="100%"
    height="100%"
    src="/a_third_page">
</iframe>

<script>
    /*
    * You can have a button, or something else, call these functions
    * whenever you need to show/hide a page.
    */
    function showIframePage(id) {
      let page = document.getElementById(id);
      page.style.display = "block";
    }

    function hideIframePage(id) {
      let page = document.getElementById(id);
      page.style.display = "none";
    }
</script>

Я бы также посоветовал вам изучить использование фреймворка, в частности таких JS, как Vue / React / Angular, потому что они сделают обработку таких вещей намного проще и проще в обслуживании. Однако если вам необходимо загрузить полные документы, лучше всего это сделать с помощью фреймов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...