我有一个灯箱效果,可以在我的网站上查看图像/视频,效果很好,问题是当我关闭灯箱时,javascript似乎挂断了,没有错误消息。这会破坏页面上已经存在的所有本机javascript。
我正在使用Quick Base,因此必须使用JS注入Javascript / CSS / HTML操作。
目标是具有多个按钮,启动相应的视频/图像...当关闭时,如果需要,可以单击另一个按钮。
我曾经尝试过删除html元素并将其隐藏,这两种情况都会发生,但是一旦执行了“ Close”功能的结尾,此后便不再有事件处理程序可用。
/////////BEGIN JS CODE////////
window.addEventListener('error', function (e) {
var error = e.error;
console.log(error);
});
$("a.Launch").on('click', function(event) {
var rid = this.dataset.rid;
var url = foo;
var Request = new XMLHttpRequest();
Request.open("GET",url,true);
Request.onload = function(){
console.log(Request.responseXML);
var file = (Request.responseXML.documentElement.getElementsByTagName("url"))[0].innerHTML;
//This request gets the actual url of the image/video based on data and button clicked.
var extension = file.substring(file.lastIndexOf('.')+1, file.length);
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><img id="VideoLauncher" width="600" src="'+file+'"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -300px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
//BoxCloseEle.style.cssText= 'float: right; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 3px; background: #222222; font-size: 31px; font-weight: bold; display: inline-block; line-height: 0px; padding: 11px 3px; position: absolute; right: 2px; top: 2px; z-index: 1002; opacity: 0.9;';
//BoxCloseEle.attr('data-content','X');
lightbox_open();
}
Request.send();
});
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
function lightbox_open() {
var lightBoxVideo = document.getElementById("VideoLauncher");
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
try{lightBoxVideo.play();}catch{}
}
function lightbox_close() {
var lightBoxVideo = document.getElementById("VideoLauncher");
try{lightBoxVideo.pause();}catch{}
$('#light').remove();
$('#fade').remove();
}
////////END JS CODE/////////
没有错误消息,但几乎就像单击时的事件处理程序一样永无休止,因此堆栈永远不会继续。