如何动态更改脚本src
How to dynamically change the script src?
我试图根据在下拉字段中选择的内容动态更改区域。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?region=DK"></script>
有人能帮我弄清楚吗?
您可以在页面加载后动态加载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>
您应该避免多次加载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
试试这个。。
<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
- 内容安全策略指令:;脚本src'self'blob:文件系统:chrome扩展资源:“;获取是否时
- 如何在 html 页面上动态添加路由到脚本 src
- 如何使用jquery或vanillajavascript从iframe中获取两个脚本src
- 获取在 <脚本 src >标记中添加的请求 URL 的状态
- HTML 脚本 src=“” 使用按钮触发重定向
- 脚本 SRC 归因有时在.php文件中不起作用
- 脚本 src=//example.com/file.js 是否有效
- 将 var 从脚本标记传递到脚本 src
- 谷歌标签管理器添加&instrad of just&转换为脚本src
- 无法使用外部javascript更改html脚本src
- 将location.href添加到脚本src中
- 追加脚本SRC导致跨源请求错误
- 执行动态创建的脚本src链接
- 使用<脚本src=..查找站点的状态代码-安全问题
- 没有内联脚本,仍然得到"由于内容安全策略指令而被拒绝:“;脚本src'self'&”;
- 当脚本src添加到head时,不会调用jQuery函数
- 脚本src不工作.它的脚本有效吗
- 嵌入<脚本src=>从remote.js重写高度
- 链接到外部js文件不工作<脚本src="client.js"