async ładowanie javascript z document.write

Question

Próbuję asynchronizować javascript api google map.

Więc normalny tag skrypt działa <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Ale następujący wersja asynchroniczny nie.

Po pewnym punkcie przerwania + kontrola działania, dowiedziałem się, że ta linia nie działa poprawnie w trybie asynchronicznym.

document.write('<' + 'script src="' + src + '"' + 
' type="text/javascript"><' + '/script>'); 

Przedmiotem dokument w trybie synchronizacji jest „HTMLDocument”, ale w trybie asynchronicznym jest „#document” zamiast. Coś stało się z obiektem dokumentu po załadowaniu strony. Myśli?

Pozdrawiam.

Aktualizacja: to pytanie jest bardziej o tym, dlaczego document.write nie jest uruchamiany, a nie asynchronizuje go api mapy google. Jeśli ustawisz punkt przerwania w tym wierszu, zobaczysz funkcję document.write. Czy ma to coś wspólnego z faktem, że document.write jest natywny?

Answer 1

document.write nie można wywołać ze skryptu asynchronicznego, ponieważ jest on odłączony od dokumentu, a zatem parser JS nie wie, gdzie go umieścić. w najlepszym wypadku przeglądarka zignoruje to. w najgorszym wypadku może napisać nad bieżącym dokumentem (tak jak w przypadku wywołania document.write po zakończeniu ładowania dokumentu).

Niestety jedyną odpowiedzią jest przepisanie skryptu, który w przypadku google api prawdopodobnie nie jest realną opcją.

Answer 2

Gdy używasz parametru callback w skrypcie-adresie URL, skrypt nie używa write(), a będziesz w stanie ładować API asynchronicznie.

Patrz: https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

Answer 3

Nie używaj document.write(), z powodów wyjaśnionych przez rynek i dr Molle. Zamiast tego użyj appendChild(), jak to zrobiono w Google's example of async loading.

Answer 4

Wystąpił bardzo podobny problem podczas asynchronicznego ładowania reklam Amazon. Udało mi się dostać document.write przybliżeniem w mojej aplikacji dla tych sytuacji poprzez zmianę jego zachowania ($ w tym przypadku odnosi się do jQuery):

document.write = function(content) { 
    if (document.currentScript) { 
    var src = document.currentScript.src 
     .replace(/\#.*$/, '') 
     .replace(/\?.*$/, '') 
     .replace(/^.*\/\//, ''); 
    setTimeout(function() { 
     var script = $('script').filter(function() { 
     var scriptSrc = $(this).attr('src'); 
     return scriptSrc && scriptSrc.indexOf(src) !== -1; 
     }); 
     $('<div></div>') 
      .addClass('doc-write') 
      .html(content) 
      .insertAfter(script); 
    }, 0); 
    } else { 
    HTMLDocument.prototype.write.apply(document, arguments); 
    } 
}; 

Takie podejście mogłoby być lepsze, ale to działa wystarczająco dobrze dla moich potrzeb. Mam nadzieję, że okaże się to przydatne.

Answer 5

Dodałem komentarz tutaj, ponieważ miałem problem z tym problemem. Podczas asynchronicznego ładowania skryptu (np. Za pomocą przycisku), postępuj zgodnie z instrukcjami: dokładnie, podobnie jak w przypadku .

Po raz pierwszy otrzymałem błąd document.write, gdy nie podałem wartości zwrotnej. Po otrzymaniu wywołania zwrotnego otrzymałem komunikat o błędzie window.initialize, ponieważ ... duh ... nie było funkcji inicjowania w moim kodzie. Zmieniłem to na moją nazwę funkcji (coś podobnego do loadMap) i zaczęło działać.

Szczerze mówiąc, po prostu skopiuj kod z witryny i powinien zadziałać. Wymień window.onload na wszystko, czego potrzebujesz, aby uruchomić tę funkcję.