fancybox iframe 内容和谷歌搜索答案

【问题标题】：fancybox iframe content and google searchfancybox iframe 内容和谷歌搜索
【发布时间】：2012-08-27 15:55:51
【问题描述】：

我的网站上有一个页面，列出了所有项目的拇指。单击特定拇指（项目）时，Fancybox 会在 iframe 中加载项目的详细信息。一切都很好！（iframe 中的内容不包括导航、标题和其他网站元素。）

我遇到的问题是谷歌搜索结果页面 - 谷歌索引了所有详细信息页面，现在当用户点击谷歌结果中的链接时，详细信息内容页面在浏览器中打开（而不是 Fancybox iframe）。这很糟糕，因为详细信息页面不包含导航页面。

任何用户友好的解决方案？

【问题讨论】：

在我看来，您似乎需要在每个详细信息页面中包含一个脚本来嗅探 URL，如果在首页上打开，请将其重定向到主页并修改URL .... 然后在主页中，再次嗅探修改后的 URL 并触发在 fancybox 中打开正确的页面（当然这完全取决于结构或您的 URL，但您没有提供太多细节）

标签： jquery iframe fancybox fancybox-2

【解决方案1】：

如果您对那些没有被 Google 索引的页面感到满意，那么您可以将 rel="nofollow" 添加到链接中：

【讨论】：

这是一个很好的答案，我之前考虑过。但是，如果您在您的网站中使用Google custom search（就像我在我的一个项目中使用的那样），您可能希望在结果页面中将这些页面作为您内容的一部分，因此可能需要编制索引。

【解决方案2】：

正如我在评论中提到的，您需要在每个“详细信息”页面中包含一个脚本来嗅探 URL 并检测页面是否在新窗口（首页）中打开，如果是则重定向到主页使用修改后的 URL（例如使用 hash），允许从主页打开fancybox 中的“详细信息”页面。

因此您可以在每个“详细信息”页面中包含此脚本：

<script type="text/javascript">
var isWindow = self == top; // returns true if opened in a new window, otherwise it migh be inside an iframe
if(isWindow){ 
 // alert("this page was opened in a new browser window");
 // then redirect to main page and add hash "detailedXX"
 window.location = "{URL}/mainpage.html#detailed01"
}
</script>

将detailed01 更改为每个“详细信息”页面的不同值。

然后在主页中，您可能会有指向每个详细页面的链接，例如

<a id="detailed01" class="fancybox" href="detailed01.html">Open project detail page 01 in fancybox</a>
<a id="detailed02" class="fancybox" href="detailed02.html">Open project detail page 02 in fancybox</a>

注意，我在每个锚点中添加了一个 ID，该锚点与我们在重定向到主页时将使用的 hash 匹配。

那么你的fancybox脚本可以是这样的：

<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function() {
 if(window.location.hash) {
  // get the URL without hash so we can restore it if needed
  var thisWindowLocation = window.location;
  var thisWindowLocationSplit = String(thisWindowLocation).split("#")[0];
  $(thisHash).fancybox({
   width: 800,
   height: 320,
   fitToView: false,
   autoSize : false,
   type: 'iframe',
   afterClose : function(){
    // returns URL to main page with no hash
    window.location = thisWindowLocationSplit
   }
  }).trigger('click');
 }
// fancybox for normal main page operation
 $(".fancybox").fancybox({
  width: 800,
  height: 320,
  fitToView: false,
  autoSize : false,
  type: 'iframe'
 });
}); // ready
</script>

我设置了DEMO here

这个演示打开两个“详细”页面：

http://www.picssel.com/playground/jquery/detailed01.html 和 http://www.picssel.com/playground/jquery/detailed02.html

如果你尝试直接打开它们，会重定向到calling page并在fancybox中打开

【讨论】：