我对Fancybox有一个严重的问题。我有一个带有图片库的网站。如果图像上有任何滥用数据,用户可以报告图像。
目前我正在使用Fancybox来显示报表。我用jQuery验证输入字段,用AJAX提交数据,脚本在父页面上。
<a href="linktothereportform?id=5" class="report fancybox.ajax" rel="nofollow" style="color:#CC0033;">report</a>
这工作完美。但是,如果用户在新选项卡或新窗口中打开链接,就会出现问题,因为验证脚本不在报表上。
那么有什么方法可以让停止右键单击或点击鼠标滚动或者我将如何克服这个问题?
谢谢
另一个选项是在单击选择器.report
时捕获所有鼠标按钮(左,右和滚轮)并触发fanybox(如果有的话):
$(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 +
可以通过对div或输入的函数调用来调用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>
您可以通过将所有这些链接替换为按钮来取消右键单击和中键单击选项。
。
$('a.report').replaceWith('<button onclick="window.location.href=''linktothereportform?id=5''">report</button>');
你可能需要稍微调整一下,加上样式按钮看起来像链接等,但一般的想法是获得"在同一窗口中打开"的功能,同时取消所有"在新窗口中打开"的可能性。
所有的功劳都应该归功于那些为我的问题给出了正确而有价值的答案的人。
我决定给将来寻求这个问题答案的人一个好的答案。
我基本上会把我的答案分成两部分。
对于我最初的问题,我需要一个超链接的解决方案。
第一个方法是hyperlinks
正如@Jeemusu的评论。
fanybox使用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>');});
您可以将link
替换为button
,这将不允许用户在新选项卡中打开它。你可以这样做:
<button onclick="window.location='linktothereportform?id=5';" class="report fancybox.ajax" style="color:#CC0033;">report</button>