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

Question

首先让我解释一下问题:

在正在构建的网站的某些页面上，用户可以单击视频的缩略图，然后会显示一个带有该视频的模式( Bootstrap )，这是来自托管视频的各个网站的嵌入链接。但问题是，如果用户单击“播放/暂停”以外的任何位置或视频内部，他们就会被带到嵌入视频网站。 我可以阻止这个吗？

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

我正在寻找一种方法(可能使用 jQuery)，在显示模式时禁用任何所有链接。或者如果有另一种更简单的方法，我很想知道。谢谢!

Answer 1

由于您尚未分享代码或结构的片段，因此我们只能提供有限的建议。尝试这样的事情(假设您的 Bootstrap 模式包装在 id #myModal 的容器中):

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

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

    return false;
});

这将阻止所有 anchor 标记上的默认操作(在本例中为导航)，如果您想提醒用户他们即将离开网站(不要返回false 在这种情况下)。

更新:由于您场景中的嵌入式播放器可能拥有自己的导航链接，因此上述代码段将不起作用。您能做的最好的事情就是检测导航并提示用户确认他们是否确实想要离开您的网站。

首先设置以下事件处理程序来检测用户何时单击视频中的链接并将离开页面:

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

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

window.isPlayingVideo = true;

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