Javascript SDK 常见启动方式

关于如何将应用嵌入到其他的页面中，使用 JS 来启动，目前的做法是五花八门，但是，实则大同小异。主要的点就在于如何找到一个可以 inserting 的基准点。

首先看几个例子

GA 统计代码嵌入

来自 Google Analytics 的 Tracking Code (新)

<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-5341XXXX-2', 'auto');
  ga('send', 'pageview');
</script>

早期的 GA 代码

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Disqus 讨论区嵌入代码

这一段是来自 GHOST，不是官方的代码。disqus_shortname 是一个全局的配置变量。

<script>
(function () {
  var s = document.createElement('script'); s.async = true;
  s.type = 'text/javascript';
  s.src = '//' + disqus_shortname + '.disqus.com/count.js';
  (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

某云客服页面插件启动代码

简单直接的嵌入一个脚本 beacon 脚本，把与身份识别相关的信息写在了 script 标签的属性中 (kf5-domain)，看起来相对比较简洁。

<!-- Start of KF5 supportbox script -->
<script defer src="//assets.kf5.com/supportbox/main.js" id="kf5-provide-supportBox" kf5-domain="foobar.kf5.com"></script>
<!-- End of KF5 supportbox script -->

总结

参考这篇文章，页面如果出现不存在 base 标签、不存在 head标签等各种意外情况，如何妥善的嵌入 script 脚本？

<script>
  !function(d, s){
    var $$ = function(t) { return d.getElementsByTagName(t); }
    var ref = $$('base')[0] || $$(s)[0];
    var ele = d.createElement(s);
    ele.src = '//example.com/beacon.js;
    ref.parentNode.insertBefore(ele, ref);
  }(document, 'script');
</script>

(未完待续)