关闭灯箱会禁用Javascript

时间:2019-05-30 20:33:40

标签: javascript html event-handling html5-video

我有一个灯箱效果,可以在我的网站上查看图像/视频,效果很好,问题是当我关闭灯箱时,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/////////

没有错误消息,但几乎就像单击时的事件处理程序一样永无休止,因此堆栈永远不会继续。

0 个答案:

没有答案