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

Question

问题说明了一切。如何使用 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 的转换代码。

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

                    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 height="1" width="1" style="border-style:none;" alt="" src="#" />
  </div>
 </noscript>

有帮助吗？

Link:

这里是 link 到实时站点：Link

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

Answer 1

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

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

脚本在附加时加载，这样您就可以完全控制它的加载时间。

Answer 2

Google 转换脚本似乎依赖于 google_conversion_id、google_conversion_language 等作为全局变量可用。假设您拥有的代码在函数内部执行（如果这是在事件内部，这将有意义），您拥有的代码将不起作用，因为变量将是它们所在函数的局部变量，并且 google 代码将无法访问它们。

您可以做两件事。

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

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

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

如果这样做，您可以随时加载 google 转换脚本，它将能够访问这些变量：

$.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 指示的任何内容（即使它是 #），它本质上是 "used up" 并且不会加载任何内容否则。

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

http://jsfiddle.net/ydu52cn1/

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

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

Answer 3

最后，以下内容为我完成了工作。感谢JLRishe and 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";                                  

    }

希望对遇到同样问题的其他人有所帮助。谢谢。

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

Update src of script tag using jQuery - reload a script with jQuery without refreshing page

html

javascript

forms

ajax

jquery