在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