不兼容的 JavaScript
Not compatible JavaScripts
本文关键字：JavaScript 不兼容 更新时间：2023-09-26
在一个网站上，我包含一个自定义的谷歌地图和一个自定义的幻灯片。
这是 HTML 文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Polideportivo Los Cedros</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.427917, -3.657941);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(40.427288, -3.657919);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
})
;}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
</head>
<body onload="initialize()">
<div id="background">
<div id="Base"><img src="images/Base.png"></div>
<div id="graficotiempo"><!-- www.TuTiempo.net - Ancho:324px - Alto:70px -->
<div id="TT_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz"><a href="http://www.tutiempo.net/Tiempo-Madrid-E28001.html">El Tiempo en Madrid</a></div>
<script type="text/javascript" src="http://www.tutiempo.net/widget/eltiempo_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz"></script>
</div>
<div id="googlePlano">
<div id="map_canvas" style="width:195px; height:132px"></div>
</div>
<div id="Capaslide">
<div id="flip" class="cycle-slideshow"
data-cycle-fx='flipVert'
data-cycle-auto-height="4:3"
data-cycle-delay="400"
data-cycle-timeout="4000" >
<img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=flipVert>
</div>
</div>
<div id="mail"><a href="mailto:info@polideportivoloscedros.es"><img src="images/mail.png" ></a></div>
<div id="tw"><img src="images/tw.png" onmouseover="this.src='images/twitter_realce.png'"
onmouseout="this.src='images/tw.png'"></div>
<div id="facebook"><img src="images/facebook.png" onmouseover="this.src='images/facebook_realce.png'" onmouseout="this.src='images/facebook.png'"></div>
<div id="logohome"><img src="images/logohome.png"></div>
<div id="logoclubsuperior"><a href="club.html"><img src="images/logoclubsuperior.png" onmouseover="this.src='images/6.png'" onmouseout="this.src='images/logoclubsuperior.png'"></a></div>
<div id="logopiscinasuperior"><img src="images/logopiscinasuperior.png" onmouseover="this.src='images/5.png'" onmouseout="this.src='images/logopiscinasuperior.png'"></div>
<div id="logotenissuperior"><img src="images/logotenissuperior.png" onmouseover="this.src='images/4.png'" onmouseout="this.src='images/logotenissuperior.png'"></div>
<div id="logopadelsuperior"><img src="images/logopadelsuperior.png" onmouseover="this.src='images/3.png'" onmouseout="this.src='images/logopadelsuperior.png'"></div>
<div id="logofitnesssuperior"><img src="images/logofitnesssuperior.png" onmouseover="this.src='images/2.png'" onmouseout="this.src='images/logofitnesssuperior.png'"></div>
<div id="logootrossuperior"><img src="images/logootrossuperior.png" onmouseover="this.src='images/1.png'" onmouseout="this.src='images/logootrossuperior.png'"></div>
</div>
</body>
</html>
问题是包含的自定义Google地图应该是可选的，这意味着用户应该能够单击地图并移动它，放大和缩小它。包含幻灯片放映后，地图不再可选。
以下是显示幻灯片放映的行：
<div id="flip" class="cycle-slideshow"
data-cycle-fx='flipVert'
data-cycle-auto-height="4:3"
data-cycle-delay="400"
data-cycle-timeout="4000"
>
<img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=flipVert>
</div>
幻灯片放映工作正常，但在插入前几行后，将显示地图，但不可选择。如果我删除前面的行，则地图可以再次选择。
我无法检测到问题的根源。
也许你在代码开头错过了" "。在较低的区域试试这个：
<div id="flip" class="cycle-slideshow"
data-cycle-fx='flipVert'
data-cycle-auto-height="4:3"
data-cycle-delay="400"
data-cycle-timeout="4000"
>
<img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=flipVert>
<img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=flipVert>
</div>
根据要求，以下是在我的桌面上使用 Firefox 的简化代码（根据剪切粘贴错误编辑）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XZZZZZZZXXXXXXZZZZZZZZ</title>
<!-- <link href="styles.css" rel="stylesheet" type="text/css"> -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.427917, -3.657941);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(40.427288, -3.657919);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
</head>
<body onload="initialize()">
<div id="background">
<div id="Base"><img src="images/Base.png"></div>
<div id="graficotiempo"><!-- www.TuTiempo.net - Ancho:324px - Alto:70px -->
<div id="TT_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz">
<!-- <a href="http://www.tutiempo.net/Tiempo-Madrid-E28001.html">El Tiempo en Madrid</a> -->
</div>
<!-- <script type="text/javascript"
src="http://www.tutiempo.net/widget/eltiempo_RCZkE1E1kSQDnshK7fzzzDDzDKUKTKrlLd1YEsy5Kkz"> </script> -->
</div>
<div id="googlePlano">
<div id="map_canvas" style="width:195px; height:132px">
</div>
</div>
<div id="Capaslide">
<div id=flip class="cycle-slideshow"
data-cycle-fx='fade'
data-cycle-auto-height="4:3"
data-cycle-delay="400"
data-cycle-timeout="4000">
<img src="slide_inicial/silde1.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde2.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde3.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde4.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde5.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde6.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde7.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde8.jpg" class=first data-cycle-fx=fade />
<img src="slide_inicial/silde9.jpg" class=first data-cycle-fx=fade />
</div>
</div>
<div id="mail">
<a href="mailto:info@polideportivoloscedros.es">
<img src="images/mail.png" />
</a>
</div>
<div id="tw">
<img src="images/tw.png"
onmouseover="this.src='images/twitter_realce.png'"
onmouseout="this.src='images/tw.png'" />
</div>
<div id="facebook">
<img src="images/facebook.png"
onmouseover="this.src='images/facebook_realce.png'"
onmouseout="this.src='images/facebook.png'" />
</div>
<div id="logohome"><img src="images/logohome.png" /></div>
<div id="logoclubsuperior">
<a href="club.html">
<img src="images/logoclubsuperior.png"
onmouseover="this.src='images/6.png'"
onmouseout="this.src='images/logoclubsuperior.png'" />
</a>
</div>
<div id="logopiscinasuperior">
<img src="images/logopiscinasuperior.png"
onmouseover="this.src='images/5.png'"
onmouseout="this.src='images/logopiscinasuperior.png'">
</div>
<div id="logotenissuperior">
<img src="images/logotenissuperior.png"
onmouseover="this.src='images/4.png'"
onmouseout="this.src='images/logotenissuperior.png'" />
</div>
<div id="logopadelsuperior">
<img src="images/logopadelsuperior.png"
onmouseover="this.src='images/3.png'"
onmouseout="this.src='images/logopadelsuperior.png'" />
</div>
<div id="logofitnesssuperior">
<img src="images/logofitnesssuperior.png"
onmouseover="this.src='images/2.png'"
onmouseout="this.src='images/logofitnesssuperior.png'" />
</div>
<div id="logootrossuperior">
<img src="images/logootrossuperior.png"
onmouseover="this.src='images/1.png'"
onmouseout="this.src='images/logootrossuperior.png'" />
</div>
</div>
</body>
</html>
相关文章：
- 幻灯片滚动javascript不起作用
- TypeError:在不兼容的接收器nodejs上调用了方法Uint8Array.length
- 你能解释一下为什么这个javascript不正确吗
- 当我在浏览器中打开HTML文件时，javascript不起作用
- Zurb基金会's javascript不工作
- three.js javascript/raycasting代码与retina显示器Mac不兼容
- PHP JSON编码输出与Javascript Ajax不兼容
- 如何让我的html5功能不兼容警告使用javascript工作
- Strava-V3 和 Javascript es6 生成器 = 不兼容
- 不兼容的 JavaScript
- JavaScript”;对于(var i＝0;..）{..}“;浏览器不兼容
- Javascript(object.innerhtml）与IE不兼容
- Javascript转CSV功能不兼容IE或Firefox
- IE8的JavaScript不兼容问题
- Javascript工具提示跨浏览器不兼容
- jsf和javascript是不兼容的
- 为什么这个Javascript与Google Chrome不兼容
- Javascript AJAX Upload与Firefox不兼容
- 数组不兼容的 Javascript
- cookie 的 Rails 编码与 JavaScript decodeURIComponent 不兼容
