个人中心
gpt4 book ai didi

javascript - 强制重新触发 ajaxed 内容上的所有(脚本/函数)

转载 作者：IT王子 更新时间：2023-10-29 03:14:52 26 4
gpt4 key购买 nike

tl;博士
我使用 ajax 来获取新内容。内容被提取并添加到页面。但是，脚本不会“重新触发”，因为它们的调用超出了 ajaxed div .
脚本加载和触发在初始页面加载时没有任何问题，但在我通过 ajax 添加新内容时则不然。我没有收到控制台错误，如果我直接访问 URL 也没有问题。

相关:

  • Forcing Script To Run In AJAX Loaded Page - 与一个特定的脚本有关。我想修复(重新启动)所有脚本，包括来自 Cloudflare apps 的动态脚本
  • Using jQuery script with Ajax in Wordpress - 同上，这仅与一个特定脚本有关
  • ajax loaded content, script is not executing

    • 简介:
    我用 Ajaxify WordPress Site(AWS)在 WordPress 网站上。
    该插件可让您选择 div通过它的 id 然后获取新内容 div使用 ajax
    html标记 
    <html>

    <head></head> 

    <body>
      <div id="page"> 
        <header></header>
        <main id="ajax"> <!-- This is what I want to ajaxify -->
          <div class="container">
            main page content
          </div> 
        </main> <!-- end of ajaxfied content  -->
        <footer></footer>
      </div> <!-- #page -->
    </body>

    </html>

    问题
    该插件有效，我加载了新内容并设置了样式，但存在问题。我的部分页面 脚本和函数调用 在我使用 ajax 的 div 之外。我有两个例子
    1- 在 <footer> 中加载并调用了 Masonry 
    <html>

    <head></head> 

    <body>
      <div id="page"> 
        <header></header>
        <main id="ajax"> <!-- This is what I want to ajaxify -->
          <div class="container">
            main page content
          </div>  
        </main>   <!-- end of ajaxfied content  -->
        <footer></footer> <!-- Masonry script is loaded and called here -->
      </div> <!-- #page -->
    </body>

    </html>
    2- 谷歌地图调用位于 <head> 
    <html>

    <head></head>  <!-- Google maps is called here -->

    <body>
      <div id="page"> 
        <header></header>
        <main id="ajax"> <!-- This is what I want to ajaxify -->
          <div class="container">
            main page content
          </div>  
        </main>  <!-- end of ajaxfied content  -->
        <footer></footer> 
      </div> <!-- #page -->
    </body>

    </html>

    这些只是两个 示例 .在其他地方还有其他人。如您所知，此类脚本不会被重新调用，因为页面上唯一重新加载的是 <main id="ajax"> .虽然 里面的新内容<main>有吗 ，正确呈现它所需的一些脚本不会被重新调用，因此我最终会丢失元素/损坏的布局。

    我不是唯一一个遇到这个问题的人。快速浏览插件的 support forum on wordpress.org说明这个问题很普遍。
    注意:如果插件有很多其他问题，我不会尝试解决这个问题。它对我有用，我只需要重新启动脚本。
    官方回应是可以通过将以下内容添加到插件的 php 文件中来重新加载/重新启动脚本: 
    $.getScript(rootUrl + 'PATH TO SCRIPT');
    哪个有效。它运作良好。例如，如果我添加 
    $.getScript(rootUrl + '/Assets/masonry.js');
    然后，即使 masonry.js 是在 ajaxed 之外加载的，在获取 ajaxed 内容时也会重新触发 masonry 函数调用 div我推荐你到 plugin's files on github为了更清楚地了解修复的实际作用(我无法理解使用 $.getScript 时会发生什么)

    总之
    如果您有 3-4 个需要在 ajaxed 内容上重新触发的脚本，则官方修复可以正常工作。
    这对我的目标不起作用，因为
  • 它太死板和硬编码
  • 一些脚本通过 Cloudflare apps 动态添加到页面中

    • 一个可能的解决方案可能涉及添加一个事件来模拟触发器，导致脚本在 ajaxed div 的底部触发。
    题:
    如何强制所有脚本 - 包括动态添加的 - 当页面的某个部分通过ajax重新加载时重新触发？

    笔记:
  • 我试图避免一个一个地调用脚本，因为这需要事先了解他们的调用。我大概是 在我头上说话但...
    我试图模仿页面加载和/或文档就绪事件 - 大多数条件脚本被触发( 如果我错了，请纠正我 ) - 在 <main> 结束时在我的 html 中，当添加新的 ajaxed 内容时，但在通过直接使用 url 加载页面时不影响文档......或任何其他类似方法。
  • 只是为了一点上下文，这是页面上的一些事件监听器列表 当插件关闭时 .我知道里面有些东西我不必触发。我只是添加了这个以供引用。另外，请注意，这是从其中一页中提取的样本。其他页面可能有所不同。

    • DOMContentLoaded
    beforeunload
    blur
    click
    focus
    focusin
    focusout
    hashchange
    keydown
    keyup
    load
    message
    mousedown
    mousemove
    mouseout
    mouseover
    mouseup
    mousewheel
    orientationchange
    readystatechange
    resize
    scroll
    submit
    touchscreen
    unload

    最佳答案

    您在此处选择的解决方案必须取决于脚本的初始化方式。有几种常见的可能性:

  • 脚本的 Action 在加载脚本后立即被调用。在这种情况下，脚本可能如下所示:
    (function() {
         console.log('Running script...');
    })();
  • 脚本的操作是为了响应某些事件(例如文档就绪 (JQuery) 或窗口加载 (JavaScript) 事件)而引起的。在这种情况下，脚本可能如下所示:
    $(window).on('load', function() {
        console.log('Running script...');
    });

    • 下面考虑了这两种可能性的一些选项。

    对于在加载时立即运行的脚本

    一种选择是删除 <script>要从 DOM 触发的元素，然后重新附加它们。使用 JQuery，你可以做到 
    $('script').remove().appendTo('html');

    当然，如果上面的代码片段本身在 <script> 中标签，那么您将创建一个不断分离和重新附加所有脚本的无限循环。此外，可能有些脚本您不想重新运行。在这种情况下，您可以向脚本添加类以正面或负面地选择它们。例如， 
    // Positively select scripts with class 'reload-on-ajax'
    $('script.reload-on-ajax').remove().appendTo('html');

    // Negatively select scripts with class 'no-reload'
    $('script').not('no-reload').remove().appendTo('html')

    在您的情况下，您可以将上述代码片段之一放置在 AJAX 完成的事件处理程序中。以下示例使用按钮单击代替 AJAX 完成事件，但概念是相同的(请注意，此示例在 StackOverflow 沙箱中无法正常工作，因此请尝试将其作为单独的页面加载以获得最佳效果) : 

    <html>
      <head></head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      <script class="reload-on-ajax">
        console.log('Script after head run.');
      </script>

      <body>
        <button id="reload-scripts-button">Reload Scripts</button>
      </body>

      <script class="reload-on-ajax">
        console.log('Script after body run.');
      </script>

      <script>
         $('#reload-scripts-button').click( () => $('script.reload-on-ajax').remove().appendTo('html') );
      </script>
    </html>


    请注意，如果脚本不是内联的(例如，通过 src 属性获取)，则它们将从服务器重新加载或从浏览器缓存中检索，具体取决于浏览器和设置。在这种情况下，最好的方法可能是删除所有 <script> s 操作 AJAX 加载的内容，并通过类似 JQuery 的 getScript() 加载/运行它们来自 AJAX 完成事件处理程序的函数。这样，您将只在适当的时间(即在加载 AJAX 内容之后)加载/运行脚本一次: 
    // In AJAX success event handler
    $.getScript('script1.js');
    $.getScript('script2.js');

    这种方法的两种变体的一个潜在问题是脚本的异步加载受到跨域限制。因此，如果脚本托管在不同的域上并且不允许跨域请求，则它将不起作用。

    对于响应事件而运行的脚本

    如果脚本在窗口加载时触发，那么您可以触发此事件: 
       $(window).trigger('load');

    不幸的是，如果脚本本身使用 JQuery 的文档就绪事件，那么我不知道手动触发它的简单方法。脚本也有可能是为了响应其他一些事件而运行的。

    显然，您可以根据需要组合上述方法。而且，正如其他人所提到的，如果脚本中有一些您可以调用的初始化函数，那么这是最干净的方法。

    关于javascript - 强制重新触发 ajaxed 内容上的所有(脚本/函数)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45626475/

    26 4 0
    文章推荐： javascript - 如何在 ReactJs 中正确使用 componentWillUnmount()
    文章推荐： go - 如何将值从一个 handlerFunc 传递到另一个 go-gin
    文章推荐： templates - 如何在 hugo go 模板中使用 asciidocify 而不是 markdownify？
    文章推荐： javascript - Bootstrap 4 多选下拉菜单
    IT王子
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com