如何动态更改脚本src？答案

【问题标题】：How to dynamically change the script src?如何动态更改脚本src？
【发布时间】：2015-04-09 06:15:07
【问题描述】：

我正在尝试根据我在下拉字段中选择的内容动态更改区域。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?region=DK"></script>

有人可以帮我解决这个问题吗？

【问题讨论】：

脚本仍将执行
Dynamically change google maps script src with select 的可能重复项

标签： javascript google-geocoder

【解决方案1】：

您可以在页面加载后动态加载 JavaScript，但请记住：一旦加载它，您就无法在活动页面中卸载 JavaScript。它存储在浏览器内存池中。您可以重新加载页面，这将清除活动脚本并重新开始。或者，您可以覆盖已设置的功能。

说到这里。以下是使用 javascript 在页面加载后更改脚本的方法：

<select onChange="changeRegion(this.value);">
    <option value="-">Select region</option>
    <option value="SE">Sweden</option>
    <option value="DK">Denmark</option>
</select>

<div id="output">
    <script id="map" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?region=DK"></script>
</div>

<script type="text/javascript">
function changeRegion(value)
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://maps.googleapis.com/maps/api/js?region=" + value;
    s.innerHTML = null;
    s.id = "map";
    document.getElementById("output").innerHTML = "";
    document.getElementById("output").appendChild(s);
}
</script>

【讨论】：

【解决方案2】：

您应该避免多次加载 Google Maps API。如果可能，您应该考虑省略该脚本标记，而是在做出下拉（区域）选择后通过 JavaScript 添加它。

编辑：

假设您有一个这样的下拉菜单：

<select id="regionSelector" onchange="loadGoogleMaps()">
  <option value="">Select region to use Google Maps:</option>
  <option value="DK">Denmark</option>
  <option value="SE">Sweden</option>
</select>

添加脚本类似于：

function loadGoogleMaps() { 

    var selectedRegion = document.getElementById("regionSelector").value;

    if(selectedRegion === '') {
       return;
    }

    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'https://maps.googleapis.com/maps/api/js?region=' + selectedRegion;
    head.appendChild(script);
}

有关异步加载 Google Maps API 的更多信息：https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

【讨论】：

你能举个例子吗？

【解决方案3】：

试试这个..

<html>
 <head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
 </head>
 <body>
  <h1>Google Maps Autocomplete Search Sample</h1>
  <div align="left">
   <input type="text" value="" id="searchbox" style=" width:800px;height:30px; font-size:15px;">
  </div>
  <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px;">

  </div>

 </body>
</html>
<script type="text/javascript">
 $(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };

  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  

     $(function() {
         $("#searchbox").autocomplete({

           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
           select: function(event,ui){
      var pos = ui.item.position;
      var lct = ui.item.locType;
      var bounds = ui.item.bounds;

      if (bounds){
       map.fitBounds(bounds);
      }
           }
         });
     });   
 });
</script>

【讨论】：

每当我在下拉列表中选择一个值时，我只需要更改脚本 src 中 region 的值
参考：stackoverflow.com/questions/11918972/…