HTML5 APP 实现后台JS更新APP前端页面功能
1、编写APP一个本地JS文件,例:service.js。
JS文件的内容为异常请求后台JS文件,并动态写入到页面的头部<head>。
以mui组件编写的代码为例:
mui.plusReady(function() {
var xhr = new plus.net.XMLHttpRequest(); // ajax 跨域调用的方法
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 4:
if (xhr.status == 200) {
try{
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement( "script" );
oScript.language = "javascript";
oScript.type = "text/javascript";
oScript.id = "serviceScript";
oScript.textContent = xhr.responseText;
oHead.appendChild(oScript);
} catch(e) {
}
}
break;
}};
xhr.cache = "false";
xhr.dataType = "script";
xhr.open("GET", "http://192.168.1.106:8080/service.js");
xhr.send();
});
2、在APP每个页面的最后,添加引用该JS文件。例:<script src="js/service.js"></script>
3、当APP页面的结构或功能需要发生变化时,就可以在后台的JS文件里,添加相同的方法来改变APP页面上相同的方法,从而达到,不升级APP,也能动态修改页面的效果(利用了JS同一个方法执行的先后顺序原理)。