[lightbox]Uncaught SyntaxError: Неожиданный идентификатор
У меня есть код JavaScript, который работает в FireFox и Chrome . В консоли Chrome JS я получаю следующую ошибку: "Uncaught SyntaxError: Неожиданный идентификатор".
Код JavaScript, который я использую:
function openBox(str, width, height)
{
if(!window.lightbox) {
window.lightbox = this;
this.width = width;
this.height = height;
this.opacity = 0.1;
this.refresh = function()
{
this.background.setAttribute('style', 'background-color:black;opacity:'+ this.opacity +';z-index:999;position:absolute;top:0px;left:0px;width:'+ window.innerWidth +'px;height:'+ window.innerHeight +'px;');
this.box.setAttribute('style', 'background-color:white;z-index:9999;width:'+ (this.width / this.facteur) +'px;height:'+ (this.height / this.facteur) +'px;position:absolute;top:'+ ((window.innerHeight - (this.height / this.facteur)) / 2) +'px;left:'+ ((window.innerWidth - (this.width / this.facteur)) / 2) +'px;');
};
this.fondu = function(facteur)
{
if(window.lightbox) {
if(facteur == undefined) {
facteur = (this.state == 0) ? this.facteur : - this.facteur;
} if(Math.abs(facteur) > 1) {
var bfr_facteur = (facteur > 0) ? facteur - 0.1 : facteur + 0.1;;
this.opacity = this.opacity * facteur / bfr_facteur;
this.width = this.width * facteur / bfr_facteur;
this.height = this.height * facteur / bfr_facteur
this.refresh();
setTimeout(function()
{
window.lightbox.fondu(bfr_facteur);
}, 10);
} else {
if(this.state == 0) {
this.box.appendChild(this.text);
this.box.appendChild(this.close);
this.state = 1;
}
}
}
};
this.background = document.createElement('div');
document.body.appendChild(background);
this.box = document.createElement('div');
this.box.setAttribute('style', 'background-color:white;z-index:9999;width:'+ (width / 6) +'px;height:'+ (height / 6) +'px;position:absolute;left:'+ (screen.availWidth / 2 - (width / 3)) +'px;top:'+ (screen.availHeight / 2 - (width / 3)) +'px;');
this.background.appendChild(box);
this.text = document.createTextNode(str);
this.close = document.createElement('a');
this.close.setAttribute('href','#lightbox:close');
this.close.setAttribute('style','float:right;');
this.close.onclick = function() {
openBox.closeBox();
}
this.close.appendChild(document.createTextNode('Close [X]'));
this.state = 0;
this.facteur = 6;
this.fondu();
}
}
и вход:
<a href="#lightbox:Bienvenue" onclick="openBox('Bienvenue sur mon site', 400, 250);return false" ><img src="./ICONE/contacts.png" title="Contacts" width="70" height="70"/>
Ошибка в первой строке, если в методе openBox.
2 ответа
Решение
Javascript код:
function openBox(str, width, height)
{
if(!window.lightbox) {
window.lightbox = this;
this.width = width;
this.height = height;
this.opacity = 0.1;
this.refresh = function()
{
this.background.setAttribute('style', 'background-color:black;opacity:'+ this.opacity +';z-index:999;position:absolute;top:0px;left:0px;width:'+ window.innerWidth +'px;height:'+ window.innerHeight +'px;');
this.box.setAttribute('style', 'background-color:white;z-index:9999;width:'+ (this.width / this.facteur) +'px;height:'+ (this.height / this.facteur) +'px;position:absolute;top:'+ ((window.innerHeight - (this.height / this.facteur)) / 2) +'px;left:'+ ((window.innerWidth - (this.width / this.facteur)) / 2) +'px;');
};
this.fondu = function(facteur)
{
if(window.lightbox) {
if(facteur === undefined) {
facteur = (this.state === 0) ? this.facteur : - this.facteur;
} if(Math.abs(facteur) > 1) {
var bfr_facteur = (facteur > 0) ? facteur - 0.1 : facteur + 0.1;
this.opacity = this.opacity * facteur / bfr_facteur;
this.width = this.width * facteur / bfr_facteur;
this.height = this.height * facteur / bfr_facteur;
this.refresh();
setTimeout(function()
{
window.lightbox.fondu(bfr_facteur);
}, 10);
} else {
if(this.state === 0) {
this.box.appendChild(this.text);
this.box.appendChild(this.close);
this.state = 1;
}
}
}
};
this.background = document.createElement('div');
document.body.appendChild(background);
this.box = document.createElement('div');
this.box.setAttribute('style', 'background-color:white;z-index:9999;width:'+ (width / 6) +'px;height:'+ (height / 6) +'px;position:absolute;left:'+ (screen.availWidth / 2 - (width / 3)) +'px;top:'+ (screen.availHeight / 2 - (width / 3)) +'px;');
this.background.appendChild(box);
this.text = document.createTextNode(str);
this.close = document.createElement('a');
this.close.setAttribute('href','#lightbox:close');
this.close.setAttribute('style','float:right;');
this.close.onclick = function() {
openBox.closeBox();
};
this.close.appendChild(document.createTextNode('Close [X]'));
this.state = 0;
this.facteur = 6;
this.fondu();
}
}
входной код:
<a href="#lightbox:Bienvenue" onclick="openBox('Bienvenue sur mon site', 400, 250);return false" ></a>
<img src="./ICONE/contacts.png" title="Contacts" width="70" height="70"/>
У меня такая же ошибка в этой функции openBox:
openBox.closeBox = function()
{
window.lightbox.box.innerHTML = "";
window.lightbox.fondu();
document.body.removeChild(window.lightbox.background);
window.lightbox = null;
};
И моя страница:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-glyphicons.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/jquery.tablesorter.min.js"></script>
<script src="assets/js/jquery.tablesorter.widgets.min.js"></script>
<script src="assets/js/date.js"></script>
<style type="text/css">
body {
background-image:url('assets/img/login_bg.png');
}
.main {
width: 98%;
height: 98%;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding: 15px 15px 15px 15px;
}
.logo {
margin: 0 0 0 -140px;
height: 532px;
width: 200px;
z-index:-1;
position: absolute;
}
#func td {
padding: 2px 2px 2px 2px;
text-align: center;
}
.map {
width: 100%;
height: 82%;
margin-bottom: 5px;
}
#files td {
padding: 2px 2px 2px 2px;
text-align: center;
}
.row {
margin: 0 0 -5px 0;
}
.fullwidth {
width: 100%;
min-width: 135px;
}
.halfwidth {
width: 48%;
}
.addselection {
min-width: 30px;
}
.devicestable {
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin-bottom: 5px;
}
.functionslist {
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin-bottom: 5px;
}
.messageboxcontainer {
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
min-height: 185px;
max-height: 39%;
/* position: absolute; */
}
.filestable {
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
min-height: 185px;
max-height: 185px;
padding-top: 5px;
}
.mapcontainer {
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
min-height: 185px;
max-height: 39%;
padding: 5px 5px 5px 5px;
/* position: absolute; */
}
input {
text-align: center;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 0,
center: new google.maps.LatLng(0.0, 0.0),
disableDefaultUI: true,
panControl: false,
zoomControl: true,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
var selected=new Array();
var markersArray = [];
function gmapsmarker(location1, location2, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location1, location2),
map: map,
animation: google.maps.Animation.DROP,
title: title
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
function deleteMarker(deltitle) {
return markersArray.indexOf(deltitle);
}
function select(bot, lat, longi) {
if (document.getElementById(bot).innerHTML == '-') {
document.getElementById(bot).innerHTML = '+';
for(var i in selected){
if(selected[i]==bot){
selected.splice(i,1);
break;
}
}
document.getElementById("selectednumber").innerHTML = selected.length;
if (selected.length==0) {
document.getElementById("selectednumber").setAttribute("data-original-title", "None Selected");
deleteOverlays();
} else {
document.getElementById("selectednumber").setAttribute("data-original-title", selected.join(', '));
}
} else {
if (selected.indexOf(bot) == -1) {
selected.push(bot);
}
document.getElementById(bot).innerHTML = '-';
document.getElementById("selectednumber").innerHTML = selected.length;
document.getElementById("selectednumber").setAttribute("data-original-title", selected.join(', '));
gmapsmarker(lat, longi, bot);
}
}
function clearselection() {
for (var i=0;i<selected.length;i++) {
document.getElementById(selected[i]).innerHTML = '+';
}
selected.length = 0;
document.getElementById("selectednumber").innerHTML = selected.length;
document.getElementById("selectednumber").setAttribute("data-original-title", "None Selected");
deleteOverlays();
}
function selectall() {
selected = $("div.addbuttons > button").map(function(){
return this.id;
}).get();
var index = selected.indexOf(" ");
selected.splice(index, 1);
var index2 = selected.indexOf("");
selected.splice(index2, 1);
for (var i=0;i<selected.length;i++) {
document.getElementById(selected[i]).onclick();
}
document.getElementById("selectednumber").innerHTML = selected.length;
document.getElementById("selectednumber").setAttribute("data-original-title", selected.join(', '));
}
function getHistory(uid) {
if (uid=="") {
document.getElementById("historyof").innerHTML = "All Bots";
} else {
document.getElementById("historyof").innerHTML = uid;
}
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("messages").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmessages.php?uid="+uid,true);
xmlhttp.send();
}
function addCommand(command, arg1, arg2) {
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
if (xmlhttp.responseText=="Success"){
alert("Command Added");
} else {
alert(xmlhttp.responseText);
}
}
}
xmlhttp.open("GET","addcommand.php?uid="+selected+"&command="+command+"&arg1="+arg1+"&arg2="+arg2,true);
xmlhttp.send();
}
var refresh;
var scroll;
<?php if($autoscrolltextbox){ echo "scroll='auto'"; } else { echo "scroll='manual'"; } ?>
function updateScroll() {
if (scroll=='auto'){
scroll='manual';
document.getElementById("autoscrollbutton").innerHTML="Auto Scroll: Off";
} else {
scroll='auto';
document.getElementById("autoscrollbutton").innerHTML="Auto Scroll: On";
}
}
function autoScroll(){
if (scroll=='auto'){
var elem = document.getElementById('messagebox');
elem.scrollTop = elem.scrollHeight;
} else {
}
}
function autorefresh(uid) {
refresh = setInterval(function() { getHistory(uid); autoScroll(); }, <?php echo $messageboxrefreshspeed; ?>);
}
function stoprefresh() {
window.clearInterval(window.refresh);
}
function viewCommands() {
stoprefresh();
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("messages").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getwaitingcommands.php",true);
xmlhttp.send();
}
function fixSelected() {
$.each(selected, function(index, value) {
document.getElementById(value).innerHTML = '-';
});
}
function refreshTable() {
$('#tablefill').load('table.php', function(){
fixSelected();
});
}
function refreshFileTable() {
$('#filetablefill').load('filetable.php', function(){
});
}
function refreshImages() {
$('#replaceimages').load('showpictures.php?uid='+uid, function(){
var sliderval=document.getElementById('defaultSlider').value;
$('.getimgimg').width(sliderval+'px');
});
}
function getImages() {
uid = $("#modaluid").val();
startdate = $("#modalstarttime").val();
enddate = $("#modalendtime").val();
filesize = $("#modalfilesize").val();
fixstartdate = Date.parse(startdate).getTime()/1000;
fixenddate = Date.parse(enddate).getTime()/1000;
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
}
}
xmlhttp.open("GET","getimages.php?uid="+uid+"&start="+fixstartdate+"&end="+fixenddate+"&filesize="+filesize,true);
xmlhttp.send();
refreshImages();
imgrefresh = setInterval(refreshImages, 2000);
}
function deletePics(uid) {
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","deletepics.php?uid="+uid,true);
xmlhttp.send();
}
$(function(){
$('#defaultSlider').change(function(){
$('.getimgimg').width(this.value);
});
$('#defaultSlider').change();
});
</script>
<script src="assets/js/lightbox/lightbox.js"></script>
<script src="assets/js/lightbox/lightbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
refreshTable();
refreshFileTable();
getHistory("");
autorefresh("");
setInterval(refreshTable, <?php echo $devicestablerefreshspeed; ?>);
setInterval(refreshFileTable, <?php echo $filestablerefreshspeed; ?>);
});
function openBox(str, width, height)
{
if(!window.lightbox) {
window.lightbox = this;
this.width = width;
this.height = height;
this.opacity = 0.1;
this.refresh = function()
{
this.background.setAttribute('style', 'background-color:black;opacity:'+ this.opacity +';z-index:999;position:absolute;top:0px;left:0px;width:'+ window.innerWidth +'px;height:'+ window.innerHeight +'px;');
this.box.setAttribute('style', 'background-color:white;z-index:9999;width:'+ (this.width / this.facteur) +'px;height:'+ (this.height / this.facteur) +'px;position:absolute;top:'+ ((window.innerHeight - (this.height / this.facteur)) / 2) +'px;left:'+ ((window.innerWidth - (this.width / this.facteur)) / 2) +'px;');
};
this.fondu = function(facteur)
{
if(window.lightbox) {
if(facteur == undefined) {
facteur = (this.state == 0) ? this.facteur : - this.facteur;
} if(Math.abs(facteur) > 1) {
var bfr_facteur = (facteur > 0) ? facteur - 0.1 : facteur + 0.1;;
this.opacity = this.opacity * facteur / bfr_facteur;
this.width = this.width * facteur / bfr_facteur;
this.height = this.height * facteur / bfr_facteur
this.refresh();
setTimeout(function()
{
window.lightbox.fondu(bfr_facteur);
}, 10);
} else {
if(this.state == 0) {
this.box.appendChild(this.text);
this.box.appendChild(this.close);
this.state = 1;
}
}
}
};
this.background = document.createElement('div');
document.body.appendChild(background);
this.box = document.createElement('div');
this.box.setAttribute('style', 'background-color:white;z-index:9999;width:'+ (width / 6) +'px;height:'+ (height / 6) +'px;position:absolute;left:'+ (screen.availWidth / 2 - (width / 3)) +'px;top:'+ (screen.availHeight / 2 - (width / 3)) +'px;');
this.background.appendChild(box);
this.text = document.createTextNode(str);
this.close = document.createElement('a');
this.close.setAttribute('href','#lightbox:close');
this.close.setAttribute('style','float:right;');
this.close.onclick = function() {
openBox.closeBox();
}
this.close.appendChild(document.createTextNode('Close [X]'));
this.state = 0;
this.facteur = 6;
this.fondu();
}
}
openBox.closeBox = function()
{
window.lightbox.box.innerHTML = "";
window.lightbox.fondu();
document.body.removeChild(window.lightbox.background);
window.lightbox = null;
};
</script>
</head>
<body style="width: 100%; height: 100%;">
<div class="main">
<div class="row" style="height:60%;">
<div class="col-lg-9 devicestable" style="height:100%; min-height:380px; padding-top: 5px; overflow:auto;">
<div id="tablefill"></div>
</div>
<div class="modal fade" id="imageModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">View Images</h4>
</div>
<div class="modal-body">
<p>UID</p>
<input class="form-control input-small" id="modaluid" type="text" value="">
<p>Start Date</p>
<input class="form-control input-small" id="modalstarttime" type="date" placeholder="Start Date">
<p>End Date</p>
<input class="form-control input-small" id="modalendtime" type="date" placeholder="End Date">
<p>Max File Size</p>
<input class="form-control input-small" id="modalfilesize" type="text" placeholder="Max File Size in MB">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#displayImages" data-dismiss="modal" onclick="getImages();">View Images</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="displayImages">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="display:inline;" class="modal-title">Images</h4> <input id="defaultSlider" type="range" min="100" max="520" />
</div>
<div class="modal-body">
<div id="replaceimages"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="window.clearInterval(window.imgrefresh);" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="col-lg-3 functionslist" style="height:100%; min-height:400px; padding-top: 5px; overflow:auto;">
<table class="table" id="func">
<tr>
<td>
<!-- contact -->
<div><a href="#lightbox:Bienvenue" onclick="openBox('Bienvenue sur mon site', 400, 250);return false" ><img src="./ICONE/contacts.png" title="Contacts" width="70" height="70"/></a></div>
<!-- <button type="button"
onclick="addCommand('ringervolumeup')" class="btn btn-default btn-small fullwidth">Ringer Up</button> -->
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="assets/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
{
$("#files").tablesorter();
}
);
</script>
</body>
</html>