嵌入式系统静态/动态加载jQuery行为差异及上传故障求助

背景 #

我有一台嵌入式系统，每台设备对应独立IP（示例：192.168.0.237），其文件导入/加载功能依赖jQuery，目标是让该功能无需联网即可运行。当前使用在线jQuery链接（https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js）时功能正常。

改为本地加载jquery.js时，静态引入<script src='http://192.168.0.237/jquery.js'></script>（页面运行在8989端口）能正常实现上传功能。但为适配不同设备IP，我编写脚本通过window.location.hostname获取设备IP并拼接URL动态加载jQuery。

动态加载代码 #

<script>
let k2 = '#http://';
let k3 = window.location.hostname;
let k4 = '@jquery.js';
let fim = `${k2} ${k3} ${k4}`;
fim = fim.replace(' @', '/');
fim = fim.replace('#', ' ');
fim = fim.replace('// ', '//');
fim = fim.trim();
document.getElementById('demo').innerHTML = window.jQuery;
document.getElementById('kkk').innerHTML = fim;
document.head.appendChild(document.createElement('script')).src = fim;
</script>

异常情况 #

动态加载后，jQuery状态检测显示已加载，但点击上传提交按钮时出现错误：请求指向不存在的serverIndex:1，正确请求应为serverIndex。静态加载时上传功能正常，请求的INITIATOR为serverIndex。

完整渲染后代码 #

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <script>  
        function checa() {
        if(jQuery) {
            alert('Jquery ONLOAD!');
        } else {
            alert('Jquery NOT HAVE - NUNCA EXECUTA');
        }
    }
    </script>
    <script src='http://192.168.0.237/jquery.js'></script>
</head>
<button onclick='checa()'>Check Status JQuery</button>
<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>
    <h4>valor:</h4>
    <p id='demo'> </p>
    <p id='kkk'></p>
    <h3>Verificador de preço</h3>
    <h3>Update Firmware</h3>
    <input type='file' name='update' id='file' onchange='sub(this)' style=display:none accept='.bin' required>
    <label id='file-input' for='file'> Selecione o arquivo ...</label>
    <input type='submit' class=btn value='Atualizar'>
    <br>
    <br>
    <div id='prg'></div>
    <br>
    <div id='prgbar'>
        <div id='bar'></div>
    </div>
    <br>
</form>
<script>
let k2 = '#http://';
let k3 = window.location.hostname;
let k4 = '@jquery.js';
let fim = `${k2} ${k3} ${k4}`;
fim = fim.replace(' @', '/');
fim = fim.replace('#', ' ');
fim = fim.replace('// ', '//');
fim = fim.trim();
document.getElementById('demo').innerHTML = window.jQuery;
document.getElementById('kkk').innerHTML = fim;
document.head.appendChild(document.createElement('script')).src = fim;
</script>
<script> <!-- DOWN IS SCRIPT  UPLOAD FILE !-->
function sub(obj) {
    var fileName = obj.value.split('\\');
    document.getElementById('file-input').innerHTML = '   ' + fileName[fileName.length - 1];
</script>

需求 #

1. 解决动态加载jQuery后上传功能的异常问题
2. 确认当前动态加载方案是否合理

内容的提问来源于stack exchange，提问作者Daniel Andrade