使用 JavaScript 实现 iframe 判断和页面重定向

背景

今天我突然发现 Google 已经能够索引我的博客了,外在特征就是我能用 Google 对博客进行站内检索

我随便搜索了一下,发现 Google 索引的 Timeline 的内容,全都指向了作为 iframe 嵌入的 /blog/timeline/timeline.html 页面,而不是我期望的页面。这其实也不是 Google 的错,因为 iframe 中的内容,本来就是不会被爬虫认为是当前页面的内容。

从 Google 的搜索结果直接点进 Timeline,就只能看到一个纯净的时间轴,看起来这个页面跟我的博客没有半毛钱关系。那怎么才能让 Google 的搜索结果指向博客页面呢?

方案

我首先想到了用 JavaScript 来控制页面跳转,这个几乎是最经济的实现方式了。

方案选定之后就是定位问题,我要解决的问题有 2 个:
1. 如何判断当前页面是从 iframe 访问的,还是直接访问的?
2. 如何控制页面跳转?

我在 Stack Overflow 找到了两个问题的答案,见参考文献。以下是解决问题的代码。

//判断当前页面是否直接显示在浏览器中
if (self == top) {
  //跳转
  window.location.replace("/blog/timeline/");
  // window.location.href='/blog/timeline/';
}

这里要指出的是,JavaScript 跳转页面有很多种实现方式,我这里选择的是最简单的实现,不依赖于 jQuery。

其中 window.location.replace 跳转时,浏览器历史不记录跳转之前的那一条 URL,而 window.location.href 会把跳转前后的 URL 都记录在浏览器中。

如果想要模拟点击链接的跳转效果,使用 window.location.href,如果想要模拟 HTTP 跳转,使用 window.location.replace

参考文献

  1. to check parent window is iframe or not
  2. How can I make a redirect page?
时间: 2024-09-28 06:46:15

使用 JavaScript 实现 iframe 判断和页面重定向的相关文章

javascript 装载iframe的子页面自适应高度

假设主页面有一个div,里面放置一个iframe: <div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%;height:100%" frameborder="0" scrolling="no"></iframe> &

javascript中location.href实现页面重定向

具体请看下面的代码:  代码如下 复制代码 <script type="text/javascript">  function goBack(){   location.href = "http://www.111cn.net/";  }  function goBackRep(){   location.replace("http://www.111cn.net/");  } </script> HTML代码 <p

javascript 调用js:javascript中iframe里面的页面调用父窗口js函数的方法

实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法.比如有A窗口,A内有个IFRAME. B,B里面的装载的是C页面,这时C要直接调用A里面的一个自定义函数ExpandPage();那么只要在C页面中写如下JS函数就可以了:window.parent.ExpandPage();如果ExpandPage()有参数也可以直接传递合适的参数进去. 本文链接http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130131/36765.h

javascript中iframe里面的页面调用父窗口js函数的方法

实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME. B,B里面的装载的是C页面,这时C要直接调用A里面的一个自定义函数ExpandPage(); 那么只要在C页面中写如下JS函数就可以了: window.parent.ExpandPage(); 如果ExpandPage()有参数也可以直接传递合适的参数进去.

JavaScript实现iframe框架子页面刷新代码

框架的刷新以前总是搞不定,现在想起这问题,解决方法还真不少,这里总结了7种用JS刷新框架的方法,在任意一个子框架页中刷新其它框架页,还是比较实用的,这7种方法是: 方法1. window.parent.frames[1].location.reload(); 方法2. window.parent.frames.bottom.location.reload(); 方法3. window.parent.frames["bottom"].location.reload(); 方法4. win

html判断当前页面是否在iframe中的实例_javascript技巧

在做HTML页面的时候,经常会遇到"如果当前页面显示在iframe中,我们就相应的处理" 判断方法为: //判断是否在iframe中 if(self!=top){ parent.window.location.replace(window.location.href); } 以上这篇html判断当前页面是否在iframe中的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内

用JavaScript实现页面重定向功能的教程

  这篇文章主要介绍了用JavaScript实现页面重定向功能的教程,是JS入门学习中的基础知识,需要的朋友可以参考下 页面重定向是什么? 当你点击一个URL来访问一个网页X,但在内部你被定向到另一页Y,仅仅是因为页面重定向.这一概念是从不同于JavaScript 页面刷新 . 可能有各种原因,为什么想从原来的页面重定向.下面列出的几个原因: 如果不喜欢你的域名,可以重定向到一个新的.同时,要引导所有访问者到新网站.在这种情况下,可以保持旧的域名,但放在一个页面到一个页面重定向使所有的旧域名游客

javascript 获取iframe里页面中元素值的方法

 本篇文章主要是对javascript获取iframe里页面中元素值的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 IE方法: document.frames['myFrame'].document.getElementById('test').value;   火狐方法: document.getElementById('myFrame').contentWindow.document.getElementById('test').value;   IE.火狐方法:   代码如

javascript 获取iframe里页面中元素值的方法_javascript技巧

IE方法:document.frames['myFrame'].document.getElementById('test').value; 火狐方法:document.getElementById('myFrame').contentWindow.document.getElementById('test').value; IE.火狐方法: 复制代码 代码如下:     function getValue(){          var tmp = '';          if(docume