Question

我对Fancybox有严重的问题。我有一个带图片库的网站。如果图像上有任何滥用数据，用户可以报告图像。

目前我正在使用Fancybox显示报告表单。我正在使用jQuery验证输入字段并使用AJAX提交数据，并且脚本位于父页面上。

<a href="linktothereportform?id=5" class="report fancybox.ajax" rel="nofollow" style="color:#CC0033;">report</a>

这完美无缺。但是，如果用户在新选项卡或新窗口中打开链接，则会出现问题，因为验证脚本不在报表上。这些都在父页面上。

有没有办法停止右键单击或点击鼠标滚动，或者我将如何解决这个问题？

由于

Answer 1

另一种选择是在点击选择器.report时捕捉所有鼠标按钮（左，右和滚轮）并触发fancybox（如果有）：

$(document).ready(function () {
    $(".report").on('mousedown', function (e) {
        if (e.which == 1 || e.which == 3 || e.which == 2) {
            e.preventDefault();
            $(this).fancybox({
                // API options
            }).click();
        }
        return false;
    });
    $(document).on('contextmenu', function (e) {
        e.preventDefault();
    });
});

请参阅 JSFIDDLE 并尝试缩略图上的任意鼠标按钮。

注意：.on()需要jQuery 1.7 +

Answer 2

您可以通过div或input.button元素上的函数调用来调用fancybox

<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">

<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>

<script type="text/javascript">
  jQuery('.fake-fancy').click(function(){
    jQuery.fancybox.open({
      href: jQuery(this).attr('data-href'),
      type: 'ajax'
    });
  });
</script>

Answer 3

您可以通过用按钮替换所有此类链接来取消右键单击和中键单击选项。

即

$('a.report').replaceWith('<button onclick="window.location.href=\'linktothereportform?id=5\'">report</button>');

您可能需要稍微调整一下，加上按钮的样式看起来像链接等。但一般的想法是获得'开放式同一窗口'功能，同时排除所有'开放式新 - 窗口'的可能性。

Answer 4

所有信用都应归功于为我的问题提供正确有价值答案的人。

我决定为那些将来会为这个问题寻求答案的人提供一个好的答案。

我基本上将我的答案分为两部分。

至于我原来的问题，我需要一个带超链接的解决方案。

所以第一种方法是超链接

@ Jeemusu的评论。

Fancybox使用AJAX加载内容。有一个名为HTTP_X_REQUESTED_WITH的HTTP变量集，如果它是一个AJAX请求，它将被设置并设置为'xmlhttprequest'。

因此，即使有人在新标签页中打开链接，我们也可以检查它是AJAX还是non-AJAX并根据该标签显示内容。所以不用担心右键点击。

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//this is an ajax request. do what you need to 
}
else {
    //this is non ajax. do what you need
}
?>

第二个选项是将超链接更改为按钮或任何div。

一般的想法是在取消所有'open-in-same-window'种可能性的同时获得'open-in-new-window'功能。

@ Scuzzy和@ techfoobar的回答

<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">

<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>

<script type="text/javascript">
  jQuery('.fake-fancy').click(function(){
    jQuery.fancybox.open({
      href: jQuery(this).attr('data-href'),
      type: 'ajax'
    });
  });
</script>

或

jQuery('a.report').each(function(){jQuery(this).replaceWith('<button onclick="window.location.href=\'' + jQuery(this).attr('href') + '\'">report</button>');});

Answer 5

您可以将link替换为button，不允许用户在新标签页中将其打开。你可以这样做：

<button onclick="window.location='linktothereportform?id=5';" class="report fancybox.ajax" style="color:#CC0033;">report</button>

如何阻止fancybox超链接在新选项卡或窗口中打开？

5 个答案: