防止多次加载jQuery插件

Question

我使用AJAX更改页面内容而不刷新实际页面，因此每个页面的特定脚本和插件通过AJAX加载太

问题在于 Google Maps API ，我不得不将其包含在每个页面中，因为否则它不起作用，但是因为它显示了一个控制台错误，它是＆＃39 ; s被多次加载You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

我已经知道如何检查它是否已加载，但我不知道如何阻止它再次加载：

if(google && google.maps){
  //Code to prevent loading the addon again
}

如何阻止加载 谷歌地图（或任何其他插件）不止一次？

Answer 1

您可以考虑替换 static 文件引用：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script> 

动态的，例如：

function ensureGoogleApi() {
    if (typeof google === "undefined" || typeof google.maps === "undefined") {
        return $.getScript('https://maps.googleapis.com/maps/api/js');
    }
    return new $.Deferred().resolve(google.maps);
}

其中$.getScript用于加载Google Maps API

示例

ensureGoogleApi()
    .then(function () {
        initMap();
    });





function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
}



function ensureGoogleApi() {
    if (typeof google === "undefined" || typeof google.maps === "undefined") {
        return $.getScript('https://maps.googleapis.com/maps/api/js?key');
    }
    return new $.Deferred().resolve(google.maps);
}

 #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>