开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js收藏本站兼容

要在JavaScript中实现“收藏本站”功能，并确保其在各种浏览器中兼容，可以按照以下步骤进行：

基础概念

Bookmarking: 允许用户将当前网页添加到浏览器的书签或收藏夹中。
Browser Compatibility: 确保代码在不同浏览器和版本中都能正常工作。

实现方法

可以通过创建一个书签链接，并使用JavaScript来触发浏览器的书签功能。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏本站示例</title>
</head>
<body>
    <button onclick="addToFavorites()">收藏本站</button>

    <script>
        function addToFavorites() {
            var title = document.title;
            var url = window.location.href;

            if (window.sidebar && window.sidebar.addPanel) { // Firefox < 23
                window.sidebar.addPanel(title, url, "");
            } else if (window.external && ('AddFavorite' in window.external)) { // IE
                window.external.AddFavorite(url, title);
            } else if (window.opera && window.print) { // Opera
                var elem = document.createElement('a');
                elem.setAttribute('href', url);
                elem.setAttribute('title', title);
                elem.setAttribute('rel', 'sidebar');
                elem.click();
            } else { // Other browsers (Chrome, Safari, etc.)
                alert('请按 Ctrl+D 或 Cmd+D 将本页添加到书签中。');
            }
        }
    </script>
</body>
</html>

代码解释

获取标题和URL: 使用document.title获取页面标题，使用window.location.href获取页面URL。
浏览器检测:
- Firefox < 23: 使用window.sidebar.addPanel方法。
- IE: 使用window.external.AddFavorite方法。
- Opera: 创建一个带有rel="sidebar"属性的链接并触发点击事件。
- 其他浏览器: 提示用户使用快捷键（Ctrl+D 或 Cmd+D）添加书签。

优势

用户体验: 提供一键收藏功能，方便用户快速保存喜欢或重要的页面。
跨浏览器兼容: 通过检测不同浏览器的特性，确保功能在大多数浏览器中都能正常工作。

应用场景

网站导航栏: 在网站的导航栏或页脚添加“收藏本站”按钮。
博客文章: 在博客文章页面添加收藏按钮，方便读者保存喜欢的文章。

常见问题及解决方法

某些浏览器不支持自动添加书签:
- 解决方法: 提示用户使用快捷键（Ctrl+D 或 Cmd+D）手动添加书签。

弹出窗口被浏览器拦截:
- 解决方法: 确保代码在用户交互事件（如点击按钮）中执行，避免在页面加载时自动触发。

通过以上方法，可以实现一个兼容性较好的“收藏本站”功能，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

设为首页和收藏本站js代码兼容IE,chrome,ff

设为首页和收藏本站js代码兼容IE,chrome,ff //设为首页 function SetHome(obj,url){ try{ obj.style.behavior='url(#default...; } } } //收藏本站 function AddFavorite(title, url) { try { window.external.addFavorite(url...\n\n加入收藏失败，请使用Ctrl+D进行添加"); } } } 页面调用: 设为首页收藏本站... 最后记得引用js: js/public.js" type="text/javascript">

3.3K9 0

为wordpress主题添加收藏本站代码

搜索到的JS收藏本站代码，几乎没有能用的，在搜狗、360、谷歌浏览器上点击都没有任何反应的。有的代码只有IE能用，有的又只有火狐能用，最好的，也就是兼容了IE和火狐。...既然最好的只有兼容IE和火狐，那么，可不可以做一个判断，如果是IE和火狐就弹出“收藏本站”窗口，如果是其它浏览器就弹出提示窗口，提示用户用的浏览器不支持JS“收藏本站”，可以手动收藏。...思路有了，于是整合了一下网上的相关代码，最终形成如下的“收藏本站”代码： //收藏本站 function AddFavorite(title...;} } } 代码意思是：如果是IE和火狐就弹出收藏本站，如果是其它浏览器就弹出提示“您的浏览器不支持JS收藏，请按 Ctrl+D 进行手动收藏！”（如下图）。...>’)” rel=”sidebar”>收藏本站这样，我们就为wordpress主题添加了“收藏本站”功能代码。未经允许不得转载：肥猫博客 » 为wordpress主题添加收藏本站代码

7382 0

js运动框架，兼容opacity

function getStyle(obj, name) { if (obj.currentStyle) { return obj....

2.3K4 0

兼容手机版本的js代码

在进行手机网页开发过程中经常会遇到手机版本不兼容问题，很容易导致在这个手机上运行的相当好，但是，换一个手机之后发现完全不是那么回事，效果都变了。...这时候，就需要调节手机版本兼容问题了，下面我来给大家介绍一种兼容各种手机版本的js代码。...meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> 还有一种就是不用那么多的js...content="yes" /> 这样，在编程的时候就不会因为手机版本兼容问题而产生烦恼了

14K2 0

编写兼容性JS代码

前文介绍了：　1 DOM四个常用的方法　　2 使用DOM核心方法完成属性填充本篇主要介绍在JS中需要注意的几个地方，另外为了减小html与javascript的耦合使用java进行onclick...但是在编写合格的javascript代码时，需要注意：　　1 平稳退化：保证在不支持js或者低版本的浏览器也能正常访问　　2 分离javascript：把html与javascript分离，有助于后期代码的维护...　　3 向后兼容性：确定老版本的浏览器不会因为脚本禁止而死掉　　4 性能考虑：确定脚本执行的最优　　编写优化的代码　　针对前一篇中的相册的代码，这里主要修改的地方是把onclick方法删除，在页面加载时...return true; } addLoadEvent(prepareGallery); 　　上面部分的代码，添加了很多的安全性检查和兼容性

3.2K9 0

js事件浏览器兼容案例

element.attachEvent) {//IE element.attachEvent("on" + type, func); } else {//DOM0,js...element.detachEvent) {//IE element.detachEvent("on" + type, func); } else {//DOM0,js

4.2K2 0

js复制插件clipboard全平台兼容

手机上也测试过可以使用的使用教程：先引用js js"> 下面是html 内容之后在加上一段js var clipboard = new ClipboardJS('#copyValue'); clipboard.on...}); 其中#copyValue是id，这样就能实现一个几乎全平台的复制功能了 github项目地址：https://github.com/zenorocha/clipboard.js

4K11 0

js复制插件clipboard全平台兼容

前面转载过一个篇简单《通过js实现复制到剪贴板功能》，但是兼容性不是很理想，有幸今天找到一个全平台通用的js，适用于Chrome 42+、Firefox 41+ 、Edge 12+、IE 9+、Opera...29+、Opera 29+等平台手机上也测试过可以使用的使用教程：先引用js js"> 下面是html...内容之后在加上一段js var clipboard... 其中#copyValue是id，这样就能实现一个几乎全平台的复制功能了 github项目地址：https://github.com/zenorocha/clipboard.js

3.2K3 0

浏览器兼容base.js

1.js滚动条兼容性 window.pageYOffset ：谷歌浏览器 document.documentElement.scrollTop ：ie 和其他浏览器 document.body.scrollTop...：火狐浏览器下面的代码封装在base.js里面日常使用 function scroll(){ if(window.pageYOffset !...} } // console.log(scroll().top); //console.log(scroll().left); 2.解决浏览器获取样式兼容

1.7K5 0

APlayer Typecho插件兼容instantclick.js

以下文章内容已弃用 APlayer Typecho插件 https://github.com/FaithPatrick/APlayer-Typecho-Plugin instantclick 3.0.1版兼容...InstantClick.init(); var APlayerOptions = [];//如果无效果尝试删掉这行 instantclick 3.1.0版兼容

8834 0

(收藏)JS验证

1 /* 2 函数名：检验表单的函数 3 作者：xuwen 日期：2007-2-10 4 参数 _obj:验证的对象 ...

5.3K10 0

【兼容性】js 浏览器兼容问题处理方式

兼容处理：因为firefox与IE都支持DOM，因此统一使用parentNode来访问父节点。...兼容处理：通过判断浏览器类型来兼容： if(document.all){ document.getElementById('element').innerText = "my text"; } else...兼容处理： function myKeyPress(evt){ //兼容IE和Firefox获得keyBoardEvent对象 evt = (evt) ?...window.event : "") //兼容IE和Firefox获得keyBoardEvent对象的键值 var key = evt.keyCode?...兼容处理：最简单的兼容性处理就是封装这两套接口： function addEvent(elem, eventName, handler) { 　　if (elem.attachEvent) {

3492 0

JS兼容所有浏览器的一段加入收藏代码，设置为首页

window.sidebar.addPanel(title, url, ""); return false; }catch(e){ alert("加入收藏失败...;">收藏阿里西西！

1.6K9 0

Deno 2021 回顾：优化内核、兼容 Node.js

仅此一项，就将 URL 解析等常见操作的成本降低了 3 倍以上，并使 Deno 成为成熟的快速 JS 运行时。...MDN 兼容性表 2021 年 8 月，Deno 被添加到 MDN 兼容性表中。...低代码解决方案 Node.js 兼容性在 2021 年第四季度，我们开始努力提供一流的 Node.js 兼容性。...允许 Deno 直接在 Deno 中运行为 Node.js 开发的应用程序和库（NPM 包），没有任何变化。在 Deno v1.15 中，我们提供了“兼容模式”的第一个预览。...它将专注于更好的 NPM 生态系统的兼容性，为常见的工作流程提供更好的 DX，并探索替代的包管理解决方案。

8303 0

移动端兼容适配js+css全局样式

这是研究了淘宝和拉钩以及网易的兼容全局样式后，提取的兼容样式，经过实战可用 css全局样式 @media screen and (max-width:321px){ body,html{font-size...body,html{font-size:16px} } @media screen and (min-width:400px){ body,html{font-size:18px} } js

7.9K2 0

JS中判断数组中是否包含某个元素indexof兼容性兼容性

1.前几天写了一个JS游戏，其中，判断数组中是否包含某个元素，开始使用如下方法判断 if(appearAnimals.indexOf(randIndex) ==-1){ } 目前主流的浏览器都能正常显示...，但是遇到IE9以下版本就不行，通过逐行排查，才发现是indexOf的兼容性问题。...IE9以前的版本都不支持此方法，现在写一个兼容的方法如下： if(!...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

2.5K6 0

js对象(2)「建议收藏」

1 . JavaScript原型如果所有对象都有私有字段[[prototype]]，就是对象的原型；读一个属性，如果对象本身没有，则会继续访问对象的原型...

5705 0

JS ajax 例子「建议收藏」

用 js ， jQuery 编写 ajax 的样式，三种写法，例子： //用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function...DOCTYPE html> 首页 js...src.target.style.background = "linear-gradient(to right,#ddd, #eee)"; } } /* //用 js

3.5K4 0

js split 用法「建议收藏」

本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3.5K3 0

js 数组复制「建议收藏」

在js中，数组赋值是属于引用赋值，如： var a =[1,2,3] var b=a ; 若b修改，a也会做相应的改变，若要在b改变的时候保持a不变则需要深度复制 b = JSON.parse(JSON.stringify

2.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭