关♥生活,关注互联网。
Chrome一键“加入收藏”按钮实现代码(gears API)
在一些网站尤其是导航网站中上常常能够看到”加入收藏”、”设为首页”这样的链接,点击后就可以完成收藏本页以及更改首页操作,非常方便,也有助于提高网站的粘性。但由于各种浏览器的出现,要兼容所有浏览器越来越不容易了,目前网上翻出的代码还没见到有能够让Chrome“一键收藏”成功的。不过在前段时间开发拾贝电台应用(Chrome Webstore)的时候,发现通过调用gears API可以生成应用的桌面图标,像桌面软件的快捷方式一样方便使用,达到和加入收藏一样的效果。于是把兼容 IE6,IE7,FF 的”加入收藏”代码与之整合,实现兼容三大主流浏览器(IE、Firefox、Chrome)的“一键收藏”按钮。
实现代码:
<!-- 加入收藏代码 Start --> function AddFavorite(sURL, sTitle) {
try { //IE window.external.addFavorite(sURL, sTitle); } catch (e) { try { //Firefox window.sidebar.addPanel(sTitle, sURL, ""); } catch (e) { try{//Chrome无法自动收藏,用创建快应用程序的捷方式来替代。 createShortcut(); } catch(e){ alert("您的浏览器不支持自动加入收藏,请使用浏览器菜单手动设置."); } } } } <!-- 加入收藏代码 End -->
<!-- 创建图标代码 Start --> function createShortcut() { var desktop = google.gears.factory.create("beta.desktop"); var description = "将网络电台放到桌面,方便日后访问该应用,享尽听广播乐趣!."; var name = "Online Radio"; var icons = { "16x16": "images/icon16.png", "32x32": "images/icon32.png", "48x48": "images/icon48.png", "128x128": "images/icon128.png" }; desktop.createShortcut(name, // 应用名称,貌似不支持中文 "hello_world_shortcuts.html", // url需考虑跨域问题 icons, // icons (至少一个尺寸) description); // 应用描述 (可选) } <!-- 创建图标代码 End -->
//买一送一,较为友好(在Chrome下同样有提示)的“设为首页”代码.
<!-- 设为首页代码 Start --> function setHomepage(pageURL) { if (document.all) { document.body.style.behavior='url(#default#homepage)'; document.body.setHomePage(pageURL); } else { try { //IE netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { try{ //Firefox var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage',pageURL); } catch(e) { alert( "您的浏览器不支持该操作,请使用浏览器菜单手动设置." ); } } } } <!-- 设为首页代码 End -->
下面是调用方法:
<a title=”http://Radio.SBboy.com/” href=”#” onclick=”javascript:setHomepage(this.title);return false;”>设为主页</a>
<a title=”http://Radio.SBboy.com/” href=”#” onclick=”javascript:AddFavorite(this.title, document.title);return false;”>一键收藏</a>
使用情况:
目前测试的有Chrome 11、Firefox4、IE8 结果如下:
IE | Firefox | Chrome | |
---|---|---|---|
设为首页 | 正常 | 提示手动 | 创建图标 |
加入收藏 | 正常 | 正常 | 提示手动 |
演示页面:
参看拾贝电台:http://radio.sbboy.com/
电台使用说明:http://sbboy.com/radiointro
也欢迎试用我的第一个Chrome应用:
——拾贝电台 https://chrome.google.com/webstore/detail/bhcbhdhdggalgngebimnmphddjnjffdo .
约13年前
拜读,长知识了,bz辛苦。
约13年前
But were not utilizing Advanced Profile Kit the error appears in Google Chrome IE and Firefox so it doesnt appear to just be a firefox issue..We methodically disabled modules and tested panels to isolate the issue and came down to Image Assist any feedback on this?
约13年前
嗯,Firefox和Chrome的兼容确实比较麻烦
先做个标记 回头有空测试学习
感谢博主分享
约13年前
嗯嗯,演示地址是 radio.sbboy.com 。
忍不住再赞一下你的博客主题。
约13年前
.In the source code above I have included a javascript that will help you detect errors..If you are trying it out on an iPhone or iPad in Safari go to settings safari developer and turn on your debugger.Reload the WebApp and look for errors that will popup in the debugger.If you arent on a mobile and just want to try it out on a standard browser IE doesnt support it yet in Firebug on Firefox you can use your console to find out what the caching is doing by using your inspect element..In Chrome you can right-click and use inspect element to do the same thing just look in your error console..If you are not on a mobile the browser should be asking you to allow caching this is a good indicator that at least it is trying to cache..Make sure you spell the tags in the manifest file and the files it is trying to cache correctly or it will not work..That is about all I can tell you feel free to use my source files and create your own WebApps.If you make any money be sure to kick some back!!!
约13年前
等会试一下!
约11年前
我初学网页时认识的函数,就有这两个!