在fancybox和普通页面显示不同的内容

Question

我不知道这个问题的具体术语，所以这里是我的努力。

想象一下，在网站上使用fancybox或任何其他浮动窗口框架。一旦链接被点击，新的fancybox实例被创建，你会看到一个框架覆盖你的网页。那么有几种情况下，fancybox实例根本无法启动（用户直接进入链接，用户在新标签中打开链接，JavaScript在用户浏览器中被禁用）。

如果不确定我的意思，转到facebook并点击图片，它会打开类似于fancybox的图片，关闭它，现在右键单击图片并在新标签中打开链接。 fancybox的内容（或任何facebook使用的）与实际页面略有不同。

我该如何解决这个使用PHP？

谢谢你的想法

Answer 1

这不是一个真正的PHP问题，但更多的JavaScript问题。您可以通过在a标记上添加rel='fancybox'或class='fancybox'属性并使用基本功能来使用fancybox。然后它会在iframe弹出窗口中打开href部分。如果您在新选项卡中打开链接，它将在新选项卡中打开href部件。

现在你也可以使用两个单独的链接。一个用于新选项卡/无JS链接，另一个用于弹出窗口。为此，您可以简单地将新标签链接添加为href，因此默认行为是打开新标签页。

现在，使fancybox打开另一个页面，你可以做几件事情。一个是创建一个完全不同的链接，另一个则是当它的fancybox时在链接上附加一个参数。后者对于图像等静态内容效率较低，所以我更喜欢第一种。

现在，而不是常规JS开的fancybox做这样的事情：

<a href='newtab.html' data-fancylink='fancy.html' class='fancy'>open me</a> 
<script> 
$('.fancy').click(function() { 
    var href = $(this).data('fancylink'); 
    if (href == undefined) { 
    href = $(this).attr('href'); //fall back to default when no fancylink 
    } 

    $.fancybox({ 
     'autoScale': true, 
     'autoDimensions': true, 
     'centerOnScroll': true, 
     'type': 'iframe', 
     'href': href 
    }); 
}); 

</script> 

---

编辑（由JFK）：一般的想法是好的，但实际上面的脚本将无法工作没有以下调整：

<script> 
$(document).ready(function() { 
    $('.fancy').click(function (e) { 
     e.preventDefault(); // you still need to prevent default behavior 
     var href = $(this).data('fancylink'); 
     if (href == undefined) { 
      href = this.href; //fall back can be simplified this way 
     } 
     $.fancybox({ 
      type: 'iframe', 
      href: href 
     }); 
    }); 
}); // ready 
</script> 

见JSFIDDLE