Откат загрузки файла Javascript. Альтернатива document.write () - PullRequest
Новая
       45

Откат загрузки файла Javascript. Альтернатива document.write ()

0 голосов
/ 24 октября 2019

Возможно, вы знакомы со старым добрым резервом загрузки Jquery: 

<script>window.jQuery || document.write('<script src="https://example.com/jquery.js"></script>')</script>

Но я читаю тут и там: не используйте document.write, вредно для вашего здоровья, оно не работает наChrome (он работает для меня, Chrome 78).
Поэтому я пытаюсь заменить его, но не могу найти решение, которое будет синхронно загружать новый файл js, до того, как будет загружено DOM.
И что заканчивается альтернативой манипуляции DOM, так это то, что браузер считает, что DOM загружен и все $(document).ready() терпят неудачу с « $ не определено ». 

function Jqfallback() { 
    var j = document.createElement('script');    
    j.src = 'https://example.com/jquery.js'; 
    document.getElementsByTagName('head')[0].appendChild(j); 
}
(window.jQuery || Jqfallback() );

Независимо от того, куда я поместил этот скрипт или новый файл JS, который в данном случае ('head')[0] уже находится перед всеми остальными JS в теле, он загружает его «асинхронно».

Есть ли другой вариант, или я продолжаю качать document.write() в конце 2019 года?

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Загрузка и анализ JQuery занимает немного времени. Поэтому используйте (маленький) timeout после добавления сценария.

Этот фрагмент включает условную загрузку в немедленно выполняемую анонимную функцию: 

(myScripting => {
    if (!window.$) { 
      let j = document.createElement('script');    
      j.src = '//code.jquery.com/jquery-3.4.1.slim.min.js'; 
      document.querySelector('head').appendChild(j);
      setTimeout( myScripting, 200 );
    } else {
      myScripting();
    }
})(JqIsLoadedSoMyScriptingCanStart);

// put your main scripting in here
function JqIsLoadedSoMyScriptingCanStart() {
  // extra check
  if (!window.$) {
    alert("Sorry, JQuery is not loaded, can't continue");
    return;
  }
  console.log("JQuery in place?");
  console.log($("head script")[1]);
}
<script src="cantLoadThis"></script>
0 голосов
/ 24 октября 2019

Поместите код, который использует jQuery, в функцию onload () . 

var jQuery1 = document.createElement('script');
jQuery1.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";

jQuery1.onload = function () {
        var $ = window.jQuery;
        $.when(
               $.getScript("https://someOtherScript.js"),  //if you need
               $.Deferred(function (deferred) {
               $(deferred.resolve);
        })
        ).done(function () {
        console.log("all scripts loaded!!");
        doNextTask(); //some other code which uses jQuery
});
};

Добавьте jQuery к вашему документу в onreadystatechange 

document.onreadystatechange = function () {
 if (document.readyState == "complete") {
    // document is ready. 
    document.head.appendChild(jQuery1);
 }
 }
...