当前位置: 首页 > 设计 > 正文
avatar

设为首页和加入收藏一直是很多网站提供的小功能,今天特别研究了一下。兼容IE和FireFox。

设为首页和加入收藏一直是很多网站提供的小功能,今天特别研究了一下。

似乎很长的一段时间上面这段代码一直工作得很好,但是随着其他非IE内核的浏览器异军突起,比如FF(FireFox),很多童鞋发现这样的代码已经失去了原有的作用,所以兼容的代码就显得非常的重要了。

对于FireFox来说,安全设置成为阻碍设为首页代码的关键因素,不过我们不得不承认这些安全设置为我们安全浏览进行保驾护航,不过如果要在FF上设为首页,那么我们需要开启UniversalXPConnect权限,当然在启用这个权限的同时浏览器会提示安全消息要求用户授权,若用户不予以授权的话,下面的代码将会因为权限问题而得不到执行。

传统的设为首页的代码如下:

<a href="#setHomePage"onclick="this.style.behavior='url(#default#homepage)';this.setHomePag('http://www.weisay.com/');return false;">设为首页</a>

(远程调试时如果不做相关设置将不会出现授权对话框,直接默认是拒绝授权)相关要求授权的对话框如下:

所以如果检测到用户没有授权,应该给出相关提示,详细的代码如下:

if (window.sidebar) {
  if (window.netscape) {
    try {
      netscape.security.PrivilegeManager
                  .enablePrivilege("UniversalXPConnect");
    } catch(e) {
             // this action was aviod by your browser,
             // if you want to enable,please enter
             // about:config in your address line,
             // and change the value of
             // signed.applets.codebase_principal_support to true
             alert("抱歉!您的浏览器不支持直接设为首页。" +
               "请在浏览器地址栏输入“about:config”并回车" +
               "然后将[signed.applets.codebase_principal_support]" +
               "设置为“true”,点击“加入收藏”后忽略安全提示,即可设置成功。");
    }
  }
  var prefs = Components.classes['@mozilla.org/preferences-service;1']
          .getService(Components.interfaces.nsIPrefBranch);
  prefs.setCharPref('browser.startup.homepage',url);
}

if (window.sidebar)是判断FF的一种方法,就像判断IE用if (document.all)一样,结合一下,兼容IE和FF的设为首页的代码如下:

var homePage = {
  is : function(url) {
    url = url || window.location.href;
    if (document.all) {
      // http://msdn.microsoft.com/en-us/library/ms531394.aspx
      document.body.style.behavior='url(#default#homepage)';
      return document.body.isHomePage(url);
    }
    return false;
  },
  set : function(url) {
    try {
      url = url || window.location.href;
      if (document.all) {
        if (!homePage.is(url)) {
          document.body.style.behavior='url(#default#homepage)';
          document.body.setHomePage(url);
          return homePage.is(url);
        }
        return true;
      } else if (window.sidebar) {
        if (window.netscape) {
          try {
            netscape.security.PrivilegeManager
                    .enablePrivilege("UniversalXPConnect");
          } catch(e) {
             // this action was aviod by your browser,
             // if you want to enable,please enter
             // about:config in your address line,
             // and change the value of
             // signed.applets.codebase_principal_support to true
             alert("抱歉!您的浏览器不支持直接设为首页。" +
               "请在浏览器地址栏输入“about:config”并回车" +
               "然后将[signed.applets.codebase_principal_support]" +
               "设置为“true”,点击“加入收藏”后忽略安全提示,即可设置成功。");
          }
        }
        var prefs = Components.classes['@mozilla.org/preferences-service;1']
                      .getService(Components.interfaces.nsIPrefBranch);
        prefs.setCharPref('browser.startup.homepage',url);
        return true;
      }
      // Not support exception
      return false;
    } catch (e) {
      return false;
    }
  }
}

大家可能注意到homePage.is的方法,这个是判断IE浏览器首页是否为指定首页的方法,如果说当前浏览器已经将指定页面设为首页了那么就不需要再次提示设为首页的信息了。目前我只找到支持IE的办法,详细见MSDN上的《isHomePage Method》 ,对于其他浏览器的支持,如果有童鞋有好的办法记得分享哦:-)

有童鞋会问如何支持Chrome这样的浏览器,遗憾的是目前我尚未找到好的办法,所以如果homePage.set返回false则说明无法设为首页,对于Chrome这样的浏览器我们不妨效仿一下Yahoo的做法:

呵呵,这样确实比较夸张,但是良好的帮助提示信息也能一定程度的帮助用户实现他们的需求,只不过没有那么便捷吧。

也不一定非要显示设为首页,如果访问网页的用户来自搜索引擎,那么显示加入收藏将比较合适,aoao在其《兼容所有浏览器的设为首页与显示小策略》 文章中也阐述了这一点。经常访问Google英文的网站的童鞋可能会注意到,有时Google会提示你经常访问本网站,是否将本网站设为首页,这个提示感觉比较贴心,当然实现的方法也很简单,比如利用Cookie记录上次访问的时间和访问的次数来综合分析。

我觉得如果用户设为首页失败的情况下应该给用户一个选择,比如提示用户是否加入收藏,当然这可能感觉比较啰嗦,大家看情况取舍吧。

兼容IE和FireFox的代码具体如下:

// url是加入收藏的网址
// title是加入收藏的标题
function addFavorite(url, title) {
  try {
    url = url || window.location.href;
    title = title || document.title;
    window.external.addFavorite(url, title);
  } catch (e) {
    try {
      window.sidebar.addPanel(title, url, "");
    } catch (e) {
      return false;
    }
  }
  return true;
}

对于已经设为首页的IE浏览器则隐藏设为首页的链接,如果设为首页失败则提示加入收藏的代码如下:

// 引入上面的homePage和addFavorite函数
function setHomePage(obj, url, title) {
  if (homePage.is(url)) {
    obj.style.display = 'none';
  } else {
    obj.style.display = '';
    obj.innerHTML = "设为首页";
    obj.onclick = function() {
      if (!homePage.set(url)) {
        if (window.confirm('设置首页失败," +
                    "是否将本站加入收藏?')) {
          if (obj.rel == undefined ||
             obj.rel == '') {
            obj.setAttribute('rel','sidebar');
          }
          if (!addFavorite(url, title)) {
            alert("非常抱歉,无法加入收藏," +
                  "请尝试使用Ctrl+D或者Command+D进行添加。");
            return false;
          }
        } else {
          return false;
        }
      }
      obj.innerHTML = "谢谢:-)";
      return false;
    }
  }
}
// 使用的办法如下:
// <a id="home" href="#">设为首页</a>
// setHomePage(document.getElementById('home')

这里有一点需要注意的是,如果添加收藏失败或者不支持添加收藏,那么应该提示用户采用Ctrl+D或者MAC下采用Command+D进行手动添加。

本文固定链接: http://www.weisay.com/blog/set-homepage-add-favorites-javascript.html | 威言威语

兼容IE和FireFox设为首页和加入收藏的JavaScript代码:目前有29 条评论

  1. avatar
    17楼
    清新美图网 360安全浏览器 Windows

    哈哈,前几天还在找这个呢。

    2012-05-22 14:02 [回复]
  2. avatar
    16楼
    疾风 Mozilla Firefox Windows

    好长啊 木有精简版吗?

    2011-12-23 17:20 [回复]
    • avatar
      William Safari iPhone

      暂时表示没有,不然都上精简版了

      2011-12-24 04:02 [回复]
  3. avatar
    15楼
    大猪 世界之窗浏览器 Windows

    我怎么感觉像加入收藏这类功能越来越被淡化了

    2011-08-19 09:08 [回复]
  4. avatar
    14楼
    某曦 Internet Explorer Windows

    今天我也研究收藏首页的问题。没想到逛你这儿,你也..

    2011-08-07 22:45 [回复]
  5. avatar
    13楼
    小星 Google Chrome Windows

    我这边也有,我是从新浪和腾讯上面弄下来的,兼容性很好,而且有些不能使用设为主页、收藏的浏览器(如google)也能有很好的提示,哪天我也贡献一下!

    2011-07-10 14:03 [回复]
    • avatar
      William Maxthon Windows

      哈哈,有时候分享分享~

      2011-07-10 22:38 [回复]
  6. avatar
    12楼
    wusx Internet Explorer Windows

    我也很想知道 为什么ie不赶快退了

    2011-06-21 19:30 [回复]
    • avatar
      William Internet Explorer Windows

      中国是一个特殊的国度,想让IE6淘汰还得好些年的。

      2011-06-24 22:55 [回复]
  7. avatar
    11楼
    木本无心 Google Chrome Windows

    很不错。
    说到兼容,让我想起了可恶的ie6……

    2011-06-21 16:20 [回复]
    • avatar
      William Internet Explorer Windows

      好吧,大家都一样的

      2011-06-24 22:55 [回复]
  8. avatar
    10楼
    Lvtu Google Chrome Windows

    最近折腾主题让我明白兼容是多么的重要!
    向小威学习。。。。。

    2011-06-21 11:58 [回复]
    • avatar
      William Internet Explorer Windows

      哈哈,其实就IE6麻烦点而已,其他都还行

      2011-06-24 22:54 [回复]
  9. avatar
    9楼
    an9 Internet Explorer Windows

    这个其实没什么用,仅作为技术交流倒是可以的。

    2011-06-21 09:59 [回复]
    • avatar
      William Internet Explorer Windows

      恩啊,这个现在用的少了,用户不喜欢被捆绑意识~

      2011-06-24 22:53 [回复]
  10. 额,这个还是可以,不过有个问题,用你这主题貌似没地方加了,嘿嘿!~

    2011-06-21 01:07 [回复]
    • avatar
      Lvtu Google Chrome Windows

      应该可以和右上部那四个图标弄到一起的!

      2011-06-21 12:07 [回复]
  11. avatar
    7楼
    林肆 Internet Explorer Windows

    过来学习啦~~求回访!求头像~

    2011-06-20 23:01 [回复]
  12. avatar
    6楼
    王晔 Google Chrome Windows

    我受不了你了

    2011-06-20 22:25 [回复]
    • avatar
      William Internet Explorer Windows

      稀客啊,蓬荜生辉。
      谢谢,你懂的。

      2011-06-20 22:54 [回复]
  13. avatar
    5楼
    海天 Google Chrome Windows

    喜欢兼容的 呵呵

    2011-06-20 20:38 [回复]
    • avatar
      William Internet Explorer Windows

      我也喜欢,哈哈

      2011-06-20 22:53 [回复]
  14. avatar
    4楼
    龙城瓶子 Maxthon Windows

    这个说实话我还比较讨厌的
    我不喜欢别人帮我设置主页
    我想收藏的话我会手动收藏
    这个提示我感觉对我来说就是多余的
    反感
    个人看法,呵呵。。。

    2011-06-20 12:40 [回复]
    • avatar
      William Internet Explorer Windows

      这个是自己点击加入的,不是强制默认偷偷的那种。。。

      2011-06-20 22:53 [回复]
  15. avatar
    地板
    任侠 Mozilla Firefox Windows

    这个,非IE下的这个一直知道,只是感觉用的不多就木有深入,看看你这里了解了不少了!

    2011-06-20 10:15 [回复]
    • avatar
      William Internet Explorer Windows

      现在人加这个一般都要兼容的,不兼容就要淘汰了

      2011-06-20 22:52 [回复]
  16. avatar
    板凳
    PRESTAN Unknow Browser Unknow Os

    文章太专业

    2011-06-20 00:46 [回复]
  17. avatar
    沙发
    CFan Internet Explorer Windows

    杀花哎!嘿嘿。搞前段的人伤不起啊。一切都为了用户体验。。

    2011-06-19 22:50 [回复]
    • avatar
      William Internet Explorer Windows

      咱是伪前端,伪设计师,哈哈~

      2011-06-19 22:52 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter