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的转换代码。

以下是适用于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检查它时，转换变量的所有值都为null。所以我尝试将所有转换代码放入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

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

Answer 1

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指示的任何内容（即使它是#），它实际上已“用完”并且不会加载任何其他内容。< / p>

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

http://jsfiddle.net/ydu52cn1/

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

正如您所发现的，jQuery还为此提供了$.getScript便捷方法。

Answer 2

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

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

我没有插入＆＃34; img＆＃34;元素以及其他转换代码。（愚蠢的错误，但我第一次使用转换代码。所以请原谅我。）
插入＆＃34; img＆＃34;的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";                                  

    }

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

Answer 3

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

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

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

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

3 个答案: