1.页面只加载入口js，主功能的js脚本通过js加载js的做法，每次带上当前的时间戳，方便刷新js。参考如下：
pub_translate_main.js 作为一个入口文件，里面加载正式的脚本文件languageControl.js，并在它后面加上时间戳。
2. 后端集成JS代码，并携带api_key。用户复制这串代码粘贴到对应项目html文件的<head></head>中。
3. 这里还需要我们在正式脚本文件languageControl.js中暴露一个对象到全局中，才能接收到api__key
4. 复制到主文件中的<head></head>中（shopify为例）
5. 页面触发脚本，生成语言选择控件，获取页面元素文本和api_key
遇到的问题
1.脚本生成的语言控件兼容不了shopify个别商店的主题，如果商家主题页面引入了用户代理样式表（如下），脚本样式也会受到影响而改变了样式，所以在某些受影响样式(宽高或间距等)给高优先级!important等。
2. 脚本在什么时候加载执行？
因为脚本会执行获取到整个页面的节点文本以及添加节点监听事件，所以需要等到页面DOM元素加载完成后再触发。由于脚本的加载src会有网络请求，所以会存在延迟。
DOM加载过程：
1)解析HTML结构
2)加载外部脚本和样式表文件
3)解析并执行脚本代码
4)构造HTML DOM模型
5)加载图片等外部文件
6)页面加载完毕
从以上顺序可以看出，js等脚本会在DOM文档构造之前执行，这样js就无法访问DOM文档对象模型。所以一般把可执行脚本放在页面初始化事件处理函数中，这样能确保文档加载完毕后再执行脚本。所以我们一般这样写：
window.onload = function(){
//执行脚本
}
注意：onload事件如果存在多个时，只会执行最后一个。（在我此情景不可行。为什么？下面解释 。）
第1种不太可行，可能监听不到readystate的状态变化，且加载速度很慢，体验感不好；第2种方法不可行，会报pub_translate_main对象未定义。如果像图片、动画之类的外部文件太多太大，也大大地延迟了脚本的执行时间。可能会导致这个异步加载的JS脚本会在DOM渲染完后才加载执行到(src网络请求脚本)，但DOM完成的事件已经结束，所以js中的监听dom加载完成的事件已经监听不到，所以执行不了脚本。
所以，我使用了第3种方法，速度也会快一些。我们可以用捕捉DOM加载的过程来判断Document对象属性是否加载完毕，可以在这个时候让脚本文件执行。实现的代码如下：
<script>
function fn()
{
if(document && document.getElementsByTagName && document.getElementById && document.body)
{
clearInterval(timer);
// 执行脚本
}
}
var timer = setInterval(fn,10); //设计一个定时器，循环调用fn函数
</script>
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
