Question

首先让我解释一下这个问题：

在整个网站构建的某些页面上，用户可以点击视频的缩略图，并在其中显示带有该视频的模态（引导程序），这是来自托管视频的各个站点的嵌入链接。但问题是，如果用户点击播放/暂停或视频内的任何地方，则会将其带到嵌入式视频网站。无论如何我能阻止这个吗？

我的目标是让用户在我的网站上观看嵌入的视频，而不是仅仅为了点击视频播放器而离开。

我正在寻找一种方法（可能使用jQuery），在显示模态时禁用任何所有链接。或者，如果有另一种更简单的方式，id喜欢知道。谢谢！

Answer 1

由于您尚未共享代码或结构的代码段，因此我们只能提供有限的建议。尝试这样的事情（假设你的bootstrap模态包装在一个标识为#myModal的容器中）：

$('#myModal a').on('click', function(e) {
    e.preventDefault();

    /* your own logic to handle the click if you want */

    return false;
});

这会阻止对所有锚标记的默认操作（在这种情况下为导航），如果您想提醒用户他们即将离开网站，则可以添加自己的自定义处理程序（不要返回{在那种情况下{1}}。

更新：由于您的方案中的嵌入式播放器可能具有自己的导航链接，因此上述代码段无效。您可以做的最好的事情是检测到导航并提示用户确认他们是否真的要离开您的网站。

首先设置以下事件处理程序，以便在用户单击视频中的链接并且即将从页面导航时检测到：

false

然后，每当用户点击视频缩略图以打开模态播放器并开始播放视频时，请设置以下标志：

window.onbeforeunload = function() {
    if (window.isPlayingVideo) {
        return "Are you sure you want to stop playing the video and leave the website?";
    }
}

这将提示用户确认他们是否要离开页面（确切的UI取决于浏览器）。请注意，您仍然无法禁用代码中的导航。您所能做的就是给用户一个选择。

禁用外部网站链接的最简单方法？

1 个答案: