Question

我有一个vue spa应用程序，并使用javascript ajax加载了js。我从thread中得到了这个想法，但是用例和我面临的问题是不同的。我搜索了几个堆栈溢出问题，但未找到任何解决方案。

该代码在桌面浏览器上工作正常，但不适用于任何移动浏览器。我已经在ios 13.6和android上测试了Safari和chrome。

我向required_script.js发出了ajax请求，并成功为我提供了必要的JavaScript。

响应头的内容类型为application/javascript。如果您有足够的时间阅读，请阅读第二部分，否则请阅读以下内容。

================================================ =====

代码如下：

var xhr = new XMLHttpRequest();
     var url = 'required_script.js'
     xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
               document.getElementById('main_script').innerHTML= xhr.responseText;
          }
     };
     xhr.onprogress = function(event) {
          fileInfo.loaded = event.loaded
          document.getElementById('contentLoaded').innerHTML = ((event.loaded /fileInfo.totalSize) * 100).toFixed(2);
     }
     xhr.open('GET', url);
     window.onload = function () {
          xhr.send()
     }

加载脚本后，我需要进行必要的DOM操作。隐藏进度条的示例。

=========================================== ======

代码如下：

<div id="app" class="loader-wrapper">
    <div class="loader">
        <div class="loader-counter">
            <h1><span id="contentLoaded">0</span>%</h1>
        </div>
    </div>
    <App class="app-body"></App>
</div>


<script id="main_script"></script>

<script id="load-script">

     var fileInfo = {
          loaded: 0,
        totalSize:{{$app_size}}
     };

     var xhr = new XMLHttpRequest();
     var url = '{{config("app.url").mix('/js/app.js')->toHtml()}}'
     xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
               document.getElementById('main_script').innerHTML= xhr.responseText;
          }
     };
     xhr.onprogress = function(event) {
          fileInfo.loaded = event.loaded
          document.getElementById('contentLoaded').innerHTML = ((event.loaded /fileInfo.totalSize) * 100).toFixed(2);
     }
     xhr.open('GET', url);
     window.onload = function () {
          xhr.send()
     }

</script>

我试图调试并使用远程js来发现问题。我发现，虽然js可以完美地加载但没有运行代码，但是在移动设备上。在我的Vue js应用程序中：

mounted(){
  console.log(fileInfo, 'Application mounted successfully')
  this.loadInfo = fileInfo
  this.load()
},

     methods:{
          load(){
               var a = this
               var increment = (a.loadInfo.totalSize - a.loadInfo.loaded)/80
               var counter = setInterval(function(){
                    console.log('Additional Loading')
                    if(a.loadInfo.loaded >= a.loadInfo.totalSize){
                         console.log('Trying to load application dom')
                         document.getElementById('app').classList.remove('loader-wrapper')
                         a.$el.querySelector('.loader').classList.add('hide-loader')
                         document.querySelector('body').classList.remove('body')
                         clearInterval(counter);
                    }

                    a.loadInfo.loaded = a.loadInfo.loaded +increment
                    var loadInPercent = ((a.loadInfo.loaded /a.loadInfo.totalSize) * 100).toFixed(2);
                    document.getElementById('contentLoaded').innerHTML = loadInPercent>100?100.00:loadInPercent;
               },20)
          }
     }

在加载vue js应用程序后，我尝试控制台日志虚拟文本。但是什么都不记录。所以我假设代码没有运行。使用remote.js，我发现ajax请求成功，并且在main_script标签中成功添加了Javacript。

任何帮助和建议都会受到赞赏。如果您有更好的方法，请分享。

Ajax加载的Javascript无法在移动设备上运行

0 个答案: