通过 Ajax 加载页面时处理脚本加载答案

【问题标题】：Handling script loading when loading page through Ajax通过 Ajax 加载页面时处理脚本加载
【发布时间】：2020-02-28 08:21:14
【问题描述】：

有没有办法处理通过 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 脚本发生冲突，并且“base_page”的第二个 ajax 调用（对于“#other_ajax_call”）不起作用，我收到以下异常：

未捕获的类型错误：$.ajax 不是函数

这是Ajax call - Loading page script only if not there in the base page 的转贴，因为我一开始没有提供足够的细节，我的问题不够清楚，我无法重新打开它。

【问题讨论】：

不清楚这个逻辑是如何开始工作的，因为您提供的代码正在导入 jQuery 的苗条版本，通常不包括 ajax 方法。
但与问题相关的是，当使用 ajax 拉入页面时，您不应该拉入一个完整的页面（...）但是它应该拉入将放置在预先存在的页面上的页面片段。在另一个中加载是无效标记。
我很笨，来自另一个脚本
好的，最好的方法是拥有一个“正文”，两个页面都通过 Ajax 加载？
需要加载到现有页面正文的页面正文的最小片段是什么。如果你加载一个新的<body>，你会用该内容替换现有的正文，确保没有<body><body></body></body>

标签： javascript jquery ajax

【解决方案1】：

因为无论如何你都得到了完整的页面，所以用 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>

我还建议你考虑使用一个框架，特别是像 Vue/React/Angular 这样的 JS 框架，因为它们会使处理这样的事情变得更加简单和易于维护。但是，如果您必须加载完整的文档，那么 iframe 是最好的方法。

【讨论】：

非常感谢