12

Google マップ API JavaScript を非同期にしようとしています。

したがって、通常のスクリプトタグが機能します<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

ただし、次の非同期バージョンはそうではありません。

(function () {
    var gmap = document.createElement('script'); gmap.type = 'text/javascript'; gmap.async = true;
    gmap.src = 'https://maps.googleapis.com/maps/api/js?sensor=false';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gmap, s);
})();

いくつかのブレークポイント + インスペクション アクションの後、この行が非同期モードで正しく実行されないことがわかりました。

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

同期モードのドキュメント オブジェクトは「HTMLDocument」ですが、非同期モードでは代わりに「#document」です。ページがロードされた後、ドキュメント オブジェクトに何かが発生しました。考え？

乾杯。

更新:この質問は、Google マップ API を非同期ロードするのではなく、document.write が起動されない理由に関するものです。この行にブレークポイントを設定すると、document.write 関数が存在することがわかります。これは、document.write がネイティブであるという事実と関係がありますか?

4

5 に答える 5

8

document.writeドキュメントから切り離されているため、JS パーサーはそれを配置する場所を認識していないため、非同期スクリプトから呼び出すことはできません。せいぜい、ブラウザはそれを無視します。最悪の場合、現在のドキュメントの上に上書きする可能性があります (ドキュメントの読み込みが完了した後に document.write を呼び出す場合など)。

残念ながら、唯一の答えはスクリプトを書き直すことです。これは、Google API の場合、おそらく実行可能なオプションではありません。

于 2012-10-22T00:47:57.820 に答える
7

Amazon 広告を非同期で読み込むときに、非常によく似た問題に遭遇しました。document.writeアプリの動作を変更することで、これらの状況にアプリで近似することができました($この場合は 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);
  }
};

このアプローチは改善される可能性がありますが、私のニーズには十分に機能します。うまくいけば、それは役に立つでしょう。

于 2014-03-24T16:03:59.867 に答える
2

callbackスクリプト URL 内でパラメーターを使用すると、スクリプトは使用されずwrite()、API を非同期で読み込むことができます。

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

于 2012-10-22T02:16:52.867 に答える
0

を使用しないでくださいdocument.write()。市場と Dr Molle が説明した理由によります。Google の async loading の例でappendChild()行われているように、代わりに使用してください。

于 2012-10-22T07:16:16.907 に答える