1

我不知道这个问题的具体术语，所以这就是我所苦苦挣扎的。

想象一下在网站上使用 fancybox 或任何其他浮动窗口框架。单击链接后，将创建新的 fancybox 实例，您会看到一个框架覆盖您的网页。那么有几种情况下，fancybox 实例根本无法启动（用户直接访问链接，用户在新选项卡中打开链接，用户浏览器中禁用了 javascript）。

如果不确定我的意思，请转到 facebook 并单击图像，它会以类似于 fancybox 的方式打开，关闭它，然后右键单击图像并在新选项卡中打开链接。花式框（或任何 facebook 使用的）的内容与实际页面略有不同。

我该如何使用 php 来解决这个问题？

谢谢你的想法

4

1 回答 1

2

那不是真正的 PHP 问题，而是更多的 javascript 问题。您可以通过在标签上添加rel='fancybox'orclass='fancybox'属性并使用基本功能来使用 fancybox 。a然后它只会href在 iframe 弹出窗口中打开该部分。如果您在新选项卡中打开链接，它将在新选项卡中打开该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

于 2013-05-08T07:38:42.990 回答