是否有人拥有允许使用 modernizr.load 或 yepnope 加载 Google Maps API 的任何工作代码？
我可以使用 modernizr 加载 JQuery 和 GMap3，但是除非我制作传统的脚本标记，否则 Google Maps API 无法工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Please help me load Google Maps API with modernizr!</title>
<style>
#map { width: 500px; height: 300px; }
</style>
<script src="/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<h1>Please help me load Google Maps API with modernizr!</h1>
<div id="map">
Placeholder
</div>
<script>
function pageInit() {
$("#map").gmap3({
map:{
options: {
center: [18.01714, -76.750113],
zoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN,
}
}
});
}
</script>
<!-- I WANT TO REMOVE THE SCRIPT TAG BELOW AND REPLACE WITH MODERNIZR LOAD! -->
<script src="//maps.google.com/maps/api/js?sensor=false&language=en"></script>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
<script>
Modernizr.load([{load: [
'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
'/js/gmap.jquery-5.1.1.min.js',
],complete: function () {loaded();}},]);
function loaded() {
$(document).ready(function() {
pageInit();
});
}
</script>
</body>
</html>
逻辑告诉我在删除脚本标签后我应该做以下更改:-
Modernizr.load([{load: [
'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
'//maps.google.com/maps/api/js?sensor=false&language=en',
'/js/gmap.jquery-5.1.1.min.js',
但如果我这样做， map 不会加载，我现在会在 Javascript 控制台中收到此错误:-
Load denied by X-Frame-Options: http://maps.google.com/maps/api/js?sensor=false&language=en does not permit cross-origin framing.
最佳答案
这是我能想到的最好的:-
<script>
Modernizr.load([{load: [
'preload!//maps.googleapis.com/maps/api/js?sensor=false&callback=loaded',
'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
'/js/gmap.jquery-5.1.1.min.js',
], complete: function () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//maps.googleapis.com/maps/api/js?sensor=false&callback=loaded';
document.body.appendChild(script);
}}]);
function loaded() {
$(document).ready(function() {
pageInit();
});
}
</script>
预加载似乎更快!但是，根据 Firebug 告诉我的内容，我认为它正在抓取文件两次。
关于javascript - 使用 modernizr.js/yepnope.js 加载 Google Maps API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18243097/