Javascript和脚本加载

问题描述：

我在JS中创建了一个小型库，为我们的客户做一些分析。Javascript和脚本加载

到目前为止，我们包括它像</body>标签靠近下列：

<script type="text/javascript" src="https://cdn.myapp.net/main.min.js"></script> 
 
<script type="text/javascript"> 
 
    MyLib.init("idofthecustomer"); 
 
</script>

但很显然，这不是在某些浏览器上运行。我查看了其他分析库，他们以多种不同的方式包含他们的脚本。

堆：

<script type="text/javascript"> 
 
    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])}; 
 
    heap.load("YOUR_APP_ID"); 
 
</script>

Google分析：

<!-- Google Analytics --> 
 
<script> 
 
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
 
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
 
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
 
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 
 

 
ga('create', 'UA-XXXXX-Y', 'auto'); 
 
ga('send', 'pageview'); 
 
</script> 
 
<!-- End Google Analytics -->

他们为什么做这样的事情？你能解释一下这个目标吗？

另一种方式，我们如何确定我们的脚本将被加载并运行？

感谢您的回答！

不清楚你的问题在这里。你的脚本文件没有加载？或者是你的MyLib.init（“idofthecustomer”）;函数根本不运行或只是抛出错误？您是否在浏览器中检查了其调试器控制台，因为它没有正常工作？ –

目前还不清楚，因为我也不清楚。 “init”方法正在调用远程API并跟踪一些特定的细节。它似乎在某些浏览器上运行不正常（统计数据在不同工具之间不匹配）。但是我们不知道哪个浏览器出现问题等等。真正的问题是：什么是加载JS库（最兼容的方式）并将其用于网站的任何页面的最佳方式？（如GoogleAnalytics，堆等） – Xavierh95

问题不在于您如何加载脚本。它不是一个cors问题，因为您正在使用

答

你确定脚本正在加载页面吗？检查头中Access-Control-Allow-Origin的值，因为您没有在自己的网站中包含JS文件。浏览器阻挡外部JS文件如果

访问控制允许来源

没有被设置为

*

或定义的域。

--- UPDATE ---

我的猜测是某个文件被加载速度不够快，然后你的函数被调用，它的工作原理，但正在加载的文件之前的某个函数执行。

Minified version of this code

window._ls = function(e,t){var a=document.createElement("script");a.type="text/javascript",a.readyState?a.onreadystatechange=function(){("loaded"===a.readyState||"complete"===a.readyState)&&(a.onreadystatechange=null,t())}:a.onload=function(){t()},a.src=e,document.getElementsByTagName("head")[0].appendChild(a)}

，然后你可以使用这样的代码，

_ls("https://cdn.myapp.net/main.min.js",function(){MyLib.init("idofthecustomer")})

哦，糟糕的主意。浏览器在默认情况下不允许这个原因是有原因的。这会为您提供跨站点脚本攻击，使您容易受到黑客的攻击。请查看OWASP前10位网络安全漏洞。 https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project#tab=OWASP_Top_10_for_2013 –

是的，这不是一个CORS问题。 – Xavierh95

@BrianPickens我不同意，你在CDN服务器上设置了这个标题，所有的公共CDN都有这个标题设置，这就是人们如何在自己的网站上使用公共CDN库。 – Himan

答

许多统计数据加载使用JavaScript，而不是用 “经典<script>应答器” 为diffrents原因：

如果脚本已被声明为i，则不要加载2次相同的库ñ
允许开发异步库加载
这是更加人性化的菜鸟，复制一个只有一个不可读的脚本

如果你的库没有加载在所有浏览器所有的时间，它可能不是整合错误。

互联网用户的最低21％的人使用统计Adsblockers
JavaScript是不是总是被允许（通常机器人，机器人很多）
萨姆浏览器不允许跨域（充电JS库或者如果你的main.min.js发送跨域请求）
IE也很难跨站脚本过滤（XSS保护）

如果有人看到anothers的原因，你可以编辑我的答案;）

Javascript和脚本加载

相关推荐