有条件地加载并执行外部 js 文件
Posted
技术标签:
【中文标题】有条件地加载并执行外部 js 文件【英文标题】：Load and execute conditionally an external js file 【发布时间】：2014-06-27 09:25:28 【问题描述】：我想仅在满足某个条件时才加载并执行外部 javascript 文件（Google Adwords 的转换脚本）。已经问过类似的问题，我尝试了他们的解决方案，但没有奏效。我有以下代码：
<script>
$(function()
if ([condition])
$.getScript('//www.googleadservices.com/pagead/conversion.js');
);
</script>
脚本已加载但未执行。如何执行？
我尝试用
更改 getScript()var script = document.createElement("script" );
script.setAttribute("src", "//www.googleadservices.com/pagead/conversion.js" );
document.getElementsByTagName("head" )[0].appendChild(script);
但效果不佳。
谢谢！
@VLAS：哎呀，贴错了，更正了
@ejay_francisco：我已经尝试创建脚本标签并将其附加到头部但它不起作用
@Barar：我的意思是页面下载脚本文件但不执行它。是的，如果你想要完整的代码：
<!-- Google Code for Formulaire Contact Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = [...];
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "[...]";
var google_remarketing_only = false;
/* ]]> */
</script>
<!-- <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script> -->
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function()
if ([condition])
$.getScript('//www.googleadservices.com/pagead/conversion.js');
$("#google_conversion").attr('src','//www.googleadservices.com/pagead/conversion/[...]/?label=[...];guid=ON&script=0');
);
</script>
<div style="display:inline;">
<img id="google_conversion" style="border-style:none;" src="#"/>
</div>
【问题讨论】：
如何加载而不被执行？这就是加载的作用。 为什么要在 regScript 上设置 src 属性并附加 script 变量？ this 链接可能会对您有所帮助 @VLAS 这不是真的。省略http: 表示它将复制当前页面的协议。它将根据当前页面的 URL 使用 http: 或 https:。
响应 cmets 中的 cmets。当您在这样的问题中回复评论者时，他们不会收到通知。
【参考方案1】：
从长远来看，我认为使用proper asynchronous version of the adwords conversion script 会更好，因为它是专门为处理这类事情而构建的。这种方式避免了任何编码错误，并且更易于阅读和维护。
因此，基于此，我认为您想要的是（虽然我不是 jQuery 专家 - 我更喜欢使用 standard javascript，但每个人都有自己的想法）：
<head>
<!-- Add the async conversion script as usual - use async if you want --->
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8"></script>
</head>
<!-- the rest of your site html and code -->
<script>
$(function()
if ([condition])
window.google_trackConversion(
google_conversion_id: "[...]",
google_conversion_language: "en",
google_conversion_format: "3",
google_conversion_color: "ffffff",
google_conversion_label: "[...]",
google_conversion_value: 0,
google_remarketing_only: false
);
);
</script>
【讨论】：
忘记回答了，谢谢！我不明白为什么谷歌不提出这个版本的脚本，它在很多情况下都非常有用 很高兴它成功了。他们确实分发了这个版本！它位于developers.google.com/adwords-remarketing-tag/asynchronous 链接已失效 :( ...但 conversion_async.js 仍然有效！:)【参考方案2】：试试这个：
<script type="text/javascript">
$(document).ready(function()
if ([condition])
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.googleadservices.com/pagead/conversion.js";
document.getElementsByTagName("head")[0].appendChild(script);
);
</script>
【讨论】：
您认为有哪些改变？【参考方案3】：试试这个：
$(function()
if ([condition])
$.getScript('//www.googleadservices.com/pagead/conversion.js', function()
$("#google_conversion").attr('src','//www.googleadservices.com/pagead/conversion/[...]/?label=[...];guid=ON&script=0');
);
);
这不会设置 #google_conversion 的 src 直到加载 conversion.js 脚本之后。如果存在依赖关系，则需要以正确的顺序执行它们。您首先执行此操作，因为 $.getScript 是异步的。
【讨论】：
Mmh 实际上并没有看到网络日志中的调用来自图像标签中的链接。实际上我认为脚本已执行，问题出在其他地方，因为有错误消息“无法在'Document'上执行'write'：无法从异步加载的外部脚本写入文档，除非它是明确打开。”。你还有什么想法吗？ 对不起，没有。我不确定为什么conversion.js 会尝试使用document.write()。这通常由完全替换文档的广告脚本使用，而不是仅修改页面行为的脚本。以上是关于有条件地加载并执行外部 js 文件的主要内容，如果未能解决你的问题，请参考以下文章