fancybox iframe内容和谷歌搜索 [英] fancybox iframe content and google search

问题描述

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

I have page in my website that lists all projects thumbs. When a particular thumb (project) is clicked, Fancybox loads project's details in iframe. All works great! (Content in iframe DOES NOT include navigation, header and other website elements.)

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

The problem I have is with Google search results page - Google indexed all details pages, and now when user clicks the link from Google results, details content page is opened in browser (instead Fancybox iframe). That is bad since details page does not iclude navigation pages.

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

Any user friendly solution?

推荐答案

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

As I mentioned in my comment, you would need to include in each "detail" page a script to sniff the URL and detect if the page was opened in a new window (top page), if so redirect to the main page with a modified URL (using a hash for instance) that will allow to open the "detail" page in fancybox from the main page.

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

So you could include in each "detail" page this script:

<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 更改为每个的不同值详细信息页面。

Change detailed01 to different value for each "detail" page.

然后在主页面中，您可能会链接到每个详细信息页面，例如

Then in the main page you may have links to each detail page like

<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 与我们将在重定向到主页面时使用的哈希匹配。

Notice that I included an ID to each anchor that matches the hash that we will be using while redirecting to the main page.

然后你的fancybox脚本可能是这样的：

Then your fancybox script can be something like:

<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>

我设置此处的演示

此演示打开两个详细页面：

This demo open two "detail" pages :

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

如果您尝试直接打开它们，则会重定向到调用页面并在fancybox中打开

If you try to open them directly, the will redirect to the calling page and open in fancybox

这篇关于fancybox iframe内容和谷歌搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！