Venobox模态框正常运行，PrettyPhoto中出现JavaScript报错求助

这个问题我之前碰到过，核心原因是PrettyPhoto的动态内容加载机制加上作用域限制导致的，咱们一步步拆解解决：

为什么会报错？ #

1. 动态元素加载时机问题：PrettyPhoto是把模态框内容动态插入到DOM中的，你页面初始加载时（包括window.onload阶段），模态框里的视频和按钮元素还不存在，所以当时的代码根本拿不到这些元素，事件绑定自然无效。
2. 作用域冲突：如果你把playPause函数放在window.onload的回调里，它就变成了局部函数，而内联的onclick="playPause()"是在全局作用域下查找这个函数，自然会报“未定义”的错误。

解决方案：利用PrettyPhoto回调+非内联事件绑定 #

我们需要借助PrettyPhoto提供的回调函数，在模态框内容完全加载后再初始化视频的事件逻辑，同时移除内联onclick，改用更可靠的事件绑定方式：

第一步：修改HTML结构（移除内联onclick） #

<div class="video-wrapper">
 <video id="bVideo" controls controlsList="nodownload">
 <source src="/video.mp4" type="video/mp4">
 Your browser does not support the video tag.
 </video>
 <div id="playButton" class="playButton"></div>
</div>

第二步：用PrettyPhoto回调初始化事件逻辑 #

在初始化PrettyPhoto的时候，配置callback_on_show回调（这个回调会在模态框显示、内容加载完成后触发），在里面完成元素获取和事件绑定：

// 初始化PrettyPhoto并配置回调
$("a[rel^='prettyPhoto']").prettyPhoto({
  // 模态框显示、内容加载完成后执行
  callback_on_show: function() {
    // 此时模态框里的元素已经存在于DOM中，可以正常获取
    var buVideo = document.getElementById("bVideo");
    var playButton = document.getElementById("playButton");

    // 定义playPause函数（局部作用域即可，不需要全局暴露）
    function playPause() {
      if (buVideo.paused) {
        buVideo.play();
        playButton.className = "";
      } else {
        buVideo.pause();
        playButton.className = "playButton";
      }
    }

    // 给视频和播放按钮绑定点击事件
    buVideo.addEventListener("click", playPause, false);
    playButton.addEventListener("click", playPause, false);
  },
  // 可选优化：关闭模态框时自动暂停视频，避免后台继续播放
  callback_on_close: function() {
    var buVideo = document.getElementById("bVideo");
    if (buVideo && !buVideo.paused) {
      buVideo.pause();
    }
  }
});

为什么之前的尝试没用？ #

• 放在window.onload里：页面初始加载时，PrettyPhoto的模态框内容还没被插入到DOM，此时document.getElementById("bVideo")返回null，而且playPause是局部函数，内联onclick找不到它。
• 调整脚本位置：不管脚本放在video-wrapper前后，页面初始加载时动态元素都不存在，所以还是拿不到目标元素，事件绑定失效。

内容的提问来源于stack exchange，提问作者Verode