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>

(未完待续)

© 2021, XZD