使用 jQuery 更新脚本标签的 src - 使用 jQuery 重新加载脚本而不刷新页面

Posted 2023-03-05

【中文标题】使用 jQuery 更新脚本标签的 src - 使用 jQuery 重新加载脚本而不刷新页面

【英文标题】：Update src of script tag using jQuery - reload a script with jQuery without refreshing page

【发布时间】：2015-03-15 20:36:56

【问题描述】：

问题说明了一切。如何使用 jQuery 更新脚本标签的“src”。 比方说，我有一个脚本，

 <script id="somescript" type="text/javascript" src=""></script>

所以当我点击一个按钮时，必须添加脚本的 src。喜欢，

 <script id="somescript" type="text/javascript" src="linktoscript.js"></script>

我正在使用这样的点击处理程序，使用以下代码。

$("#somescript").attr("src","linktoscript.js");

它实际上更新了 src，但是当我通过 firebug 检查它时，它告诉我刷新页面以使脚本正常工作。

研究：

经过一些研究，我发现 jQuery 的 $.get() 可以完成这项工作，是的，它会加载脚本。但这并没有完成我的工作。

实际问题：

我正在尝试在成功提交表单时使用 Ajax 加载 Google 的转换代码。

这是应该适用于 Google 转换代码的 Ajax 脚本部分。

                    if (res == "yes") 
                        $('#success').fadeIn().delay(5000).fadeOut();
                        $('#regform')[0].reset();
                        window.location.href = '#'; 
                        /* <![CDATA[ */
                        var google_conversion_id = xxxxxxxxx;
                        var google_conversion_language = "en";
                        var google_conversion_format = "2";
                        var google_conversion_color = "ffffff";
                        var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
                        var google_remarketing_only = false;
                        /* ]]> */

 $.getScript("http://www.googleadservices.com/pagead/conversion.js");   
  

它会加载转换脚本，但是当我从 firebug 检查它时，转换变量的所有值都是空的。 因此，我尝试将所有转换代码放入 html 文件中，然后加载转换脚本，例如，

 <script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = xxxxxxxxx;
  var google_conversion_language = "en";
  var google_conversion_format = "2";
  var google_conversion_color = "ffffff";
  var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
  var google_remarketing_only = false;
  /* ]]> */ 
 </script>

 <script type="text/javascript" src="#"></script> <!--Update this src-->

 <noscript>
  <div style="display:inline">
   <img   style="border-style:none;"  src="#" />
  </div>
 </noscript>

有什么帮助吗？

链接：

这是直播网站的链接：Link

更新： 这就是我得到的。在firebug的脚本面板中，表单提交后，

【问题讨论】：

看看这个答案：***.com/questions/14521108/…

提供复制您的问题的在线链接，以便对其进行调试

@A.Wolff。谢谢你的关心。我已经更新了帖子并插入了链接。

经过一番快速搜索，该脚本似乎正在使用文档写入功能，因此一旦文档完全加载就调用它作为不利影响。覆盖此方法不是一个好建议，但应该可以解决您的问题。参见例如：articles.adamwrobel.com/2010/12/23/…希望对您有所帮助

@A.Wolff。我试过你推荐的方法。尽管如此，还是没有运气。但是一件奇怪的事情。我已将转换代码直接插入到 document.ready 函数中只是为了检查它。不，Ajax 或其他复杂的东西。奇怪的是我仍然看到空值。提供的代码可能不正确吗？你怎么看？

【参考方案1】：

最后，以下为我完成了这项工作。感谢JLRishe 和A. Wolff 的支持。

在我之前的代码中，有两个问题。

我没有将“img”元素与其他转换代码一起插入。 （愚蠢的错误，但我是第一次使用转换代码。所以请原谅我）。 以默认格式插入“img”标签的 src 会出错。默认的 & 将在 AJAX 响应时呈现 Invalid URL encode 错误。感谢Tag Assitant。与其使用&，不如直接使用&，像这样。

www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0

这是最终对我有用的方法。

    if (res == "yes") 
        $('#success').fadeIn().delay(5000).fadeOut();
        $('#regform')[0].reset();   

        <!-- Google Code for Lead Conversion Page -->                           
         /* <![CDATA[ */
         window.google_conversion_id = xxxxxxxxx;
         window.google_conversion_language = "en";
         window.google_conversion_format = "2";
         window.google_conversion_color = "ffffff";
         window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
         window.google_remarketing_only = false;
         /* ]]> */
         $.getScript("//www.googleadservices.com/pagead/conversion.js");                            

         window.scriptTag2 = document.createElement('noscript');
         window.imgTag = document.createElement('img');
         imgTag.height = 1;
         imgTag.width = 1;
         imgTag.border = 0;
         imgTag.src = "//www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0";                                  

    

我希望它能帮助遇到同样问题的其他人。 谢谢。

【参考方案2】：

Google 转换脚本似乎依赖 google_conversion_id、google_conversion_language 等作为全局变量。假设您拥有的代码在函数内部执行（如果这是在事件内部，这将是有意义的），那么您拥有的代码将不起作用，因为变量将是它们所在的函数的本地变量，而谷歌代码没有办法对付他们。

你可以做两件事。

一种是提前在全局范围内定义这些变量，即这样做：

<script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = xxxxxxxxx;
  var google_conversion_language = "en";
  var google_conversion_format = "2";
  ...
</script>

（您也可以将这些放在外部脚本文件中，并在页面加载时加载该文件：

如果你这样做，你可以随时加载谷歌转换脚本，它就可以访问这些变量：

$.getScript("http://www.googleadservices.com/pagead/conversion.js");   

另一种选择是在加载脚本之前将变量分配给window 对象，这相当于将它们放在全局范围内：

if (res == "yes") 
    $('#success').fadeIn().delay(5000).fadeOut();
    $('#regform')[0].reset();
    window.location.href = '#'; 

    window.google_conversion_id = xxxxxxxxx;
    window.google_conversion_language = "en";
    window.google_conversion_format = "2";
    window.google_conversion_color = "ffffff";
    window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
    window.google_remarketing_only = false;

    $.getScript("http://www.googleadservices.com/pagead/conversion.js");   

---

注意：

关于这个问题最初涉及的问题，您无法通过更改现有脚本元素的src 属性来加载脚本：

http://jsfiddle.net/5vf6b924/

一旦script 元素加载了src 所指示的任何内容（即使它是#），它本质上就已“用完”并且不会加载任何其他内容。

您可以做的是创建一个新的script 元素并将其添加到DOM：

http://jsfiddle.net/ydu52cn1/

这应该会成功加载脚本（异步）。

如您所见，jQuery 还为此提供了$.getScript 便利方法。

【讨论】：

还是一样的结果。 src 得到更新，但萤火虫说我需要刷新页面

正如我看到的问题，这与缓存无关，但由于某种原因无法执行脚本

@A.Wolff 我已经重写了我的答案。

@JLRishe，我已经更新并添加了使用您的解决方案后看到的图像。除这两个变量外，所有变量均为空/null。

【参考方案3】：

您可以将脚本标签附加到 DOM

if (yourCondition === true) 
$('head')
    .append($('<script id="somescript" type="text/javascript" src="linktoscript.js"></script>'));

脚本在附加的那一刻被加载，这样你就可以完全控制它的加载时间。

【讨论】：

我也试过了。结果是一样的。所有转化变量的空值

你能发布你的完整脚本，还是小提琴？我不知道事件的流程/级联是如何工作的，所以在我知道之前我无法提供帮助；如果我不知道相对于动态添加脚本的时间和地点访问这些变量，我无法尝试查看为什么这些变量为空

我已经更新了我的帖子并提供了指向实时站点的链接。您现在也许可以全面检查了。