1. 功能描述:
把页面加入收藏功能,兼容各个浏览器
注意:
有些浏览器的设置就是不支持用js来把页面加入收藏夹,只能让用户手动去在浏览器或者按键去设置这些功能,这里说的兼容是指当浏览器有这个设置的时候js会有提示.
1.ie使用:window.external.addFavorite()
2. Firefox
3.其他主流浏览器(chrome、opera、safari)其他浏览器没有此功能,不过可以提醒用户使用ctrl+d的方法手动添加
代码运行尝试1:
//加入收藏夹 function AddFavorite(sURL, sTitle) { var sTitle =" "; //sTitle:添加到收藏夹中的网站页面标题名称。 var sURL = location.href; //sURL:添加到收藏夹的完整网站页面地址 try { window.external.addFavorite(sURL, sTitle);//IE浏览器 } catch (e) { try { window.sidebar.addPanel(sTitle, sURL, "");//Firefox浏览器 } catch (e) { alert("加入收藏失败,请使用Ctrl+D进行添加"); } } } <a href="#" onclick="AddFavorite(window.location,document.title)" >加入收藏</a>
这段代码是网上常用的收藏代码,包括我现在工作的地方项目网站也是这么写的,但实际上......
我们来测试一下吧
测试浏览器:ie,火狐浏览器,谷歌浏览器,猎豹浏览器,360浏览器,oprea浏览器
测试结果:火狐浏览器不行,360也是不行
失败原因:
1.360 失败原因:在ie浏览器下,加入收藏夹的功能是正常的,而360显然用的是ie内核,理论上没理由不行的,但是据某些不确定来源的消息说是新版360浏览器,为了安全所以禁用了加入收藏夹功能,在主程序里面写死了一个白名单。所以你懂得.......
2.火狐浏览器失败原因:官方文档上写的清楚,从版本23以后,sidebar.addPanel方法被抛弃,但是可以在标签上加上rel="sidebar"来代替,
<a href="#" onclick="AddFavorite(window.location,document.title)" rel="sidebar">加入收藏</a>
找到了失败原因,下面我们就来改一下吧!!!
function AddFavorite(sURL, sTitle) { var sTitle=''; var sURL=location.href; if (window.sidebar) return true; try{ window.external.addFavorite(sURL, sTitle); }catch(e){ alert( "加入收藏失败,请使用Ctrl+D进行添加" ); } return false; } <a href="#" onclick="AddFavorite(window.location,document.title)" rel="sidebar">加入收藏</a>
测试浏览器:ie,火狐浏览器,谷歌浏览器,猎豹浏览器,360浏览器,oprea浏览器
测试结果:ie,火狐浏览器,猎豹直接弹出收藏框,其他都提示
相关知识点:
1.window.external
应用程序通过内嵌浏览器的方式,利用js的window.external可以达到控制窗体行为的效果,如控制窗体宽高大小,透明度,网页截屏,网页读写文件,网页控制桌面行为等
我们在js中可以通过window.external.aaaa()来调用浏览器提供的外部方法aaaa。
window.external的些用法
(1)external.AddFavorite 把网站加入到用户的收藏夹
语法:external.AddFavorite(网址,标题);
function f(){ window.external.AddFavorite(location.href, document.title); }
(2)external.AddDesktopComponent 把网站作为用户的Active桌面
语法:external.AddDesktopComponent(地址,类型[image/website],左距离,顶距离,宽度,长度)
function f(){ //例子 window.external.AddDesktopComponent("http://www.baidu.com/", "website",0,0,800,600); }
(3)external.NavigateAndFind 搜索指定网站中的某个字段
语法:external.NavigateAndFind(文件地址,关键字,_Target)
function f(){ window.external.NavigateAndFind("http://www.baidu.com/","张银","_self"); }
(4)external.ShowBrowserUI 调用语言选择窗口与收藏夹管理窗口
语法:external.ShowBrowserUI(类型[LanguageDialog/OrganizeFavorites], null)
<input type="button" name="button" value="语言设置" onclick="window.external.ShowBrowserUI('LanguageDialog', null)"> <input type="button" name="submit" value="整理收藏夹" onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)">
(5)external.ImportExportFavorites 导入与导出用户收藏夹
语法:external.ImportExportFavorites(导入/true 导出/false, 文件路径)
<input type="button" name="Button" value="导入收藏夹" onclick=window.external.ImportExportFavorites(true,"http://www.baidu.com/");> <input type="button" name="Button3" value="导出收藏夹" onclick=window.external.ImportExportFavorites(false,"http://www.baidu.com/");>
2.window location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀
Window Location Hash
定义和用法
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
例子:
实例
假设当前的 URL 是: http://example.com:1234/test.htm#part2:
<html> <body> <script type="text/javascript"> document.write(location.hash); </script> </body> </html>
输出:
#part2
Window Location Hostname
定义和用法
hostname 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名。
语法
location.hostname
实例
假设当前的 URL 是: http://example.com:1234/test.htm#part2:
<html> <body> <script type="text/javascript"> document.write(location.hostname); </script> </body> </html>
输出:
example.com
注意:
之前var sURL = location.hostname;
然后发现所有的浏览器都提示加入收藏失败,请使用Ctrl+D进行添加,
后来才发现应该是var sURL = location.href;
Window Location Href
location.href 属性返回当前页面的 URL。
实例
返回(当前页面的)整个 URL:
<script>
document.write(location.href);
</script>
以上代码输出为:
http://www.runoob.com/js/js-window-location.html
3. 异常处理try catch (e)
Try...Catch 声明
try...catch可以测试代码中的错误。try部分包含需要运行的代码,而catch部分包含错误发生时运行的代码。
语法:
try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}
注意:try...catch使用小写字母。大写字母会出错。
我们可以添加try...catch声明,这样当错误发生时可以采取更适当的措施。
使用总结:
为防止和处理一个运行时错误,只需要把你所要监控的代码放进一个try块就可以了。紧跟着try块的,包括一个说明你希望捕获的错误类型的catch子句。
也就是说
try块中的语句首先被执行。如果运行中发生了错误,控制就会转移到位于catch块中语句,否则,catch块的语句被跳过不执行
下面我们来看一个例子:
<script language="javascript"> try { document.writeln("开始执行try块语句 ---> ") document.writeln("还没有发生例外 ---> ") alert((prompt("输入一个值:",""))) } catch(err) { document.writeln("捕捉到例外,开始执行catch块语句 --->"); document.writeln("错误名称: " + err.name+" ---> "); document.writeln("错误信息: " + err.message+" ---> "); } finally { document.writeln("开始执行finally块语句") } </script>
我们输入abc,然后确定,输出结果如下:
“开始执行try块语句 ---> 还没有发生例外 ---> 捕捉到例外,开始执行catch块语句 ---> 错误名称: TypeError ---> 错误信息: 'abc' 未定义 ---> 开始执行finally块语句”
上述例程以try块语句开始,当输出信息“还没有发生例外”后,弹出输入对话框,要求用户输入一个数值,当我们输入非法的信息"abc"后,就引发了一个例外,所以剩下的try块中的语句将被跳过而开始执行catch块语句。Catch块开始的err参数作为这个例外的错误对象,它具有name和message两个属性。最后,执行finally块的语句。
我们看到,由于没有错误发生,当try块的语句执行完毕后,catch块语句被跳过,出现一个窗口显示输入的数值,最后执行了finally块的语句。
但是并不是所有的场合都适合try catch,大量的try catch会降低代码的可读性,只有在异常触发时才会对程序的性能造成较大的影响。(参考文章:小酌重构系列[20]——用条件判断代替异常)
流程控制语句:流程控制有它本身的逻辑,我们应该用判断来规避try catch语句块的使用
当使用try catch来控制程序流程时,如果程序中不存在“危险”代码(例如:类型转换、建立连接等),就没有必要使用try catch,我们可以直接使用条件判断来控制程序流程。
示例:
重构前
下面这段代码表示“微波炉当前如果没有被使用,那么我们就可以用它加热食物”。
public class Microwave { private IMicrowaveMotor Motor { get; set; } public bool Start(object food) { bool foodCooked = false; try { Motor.Cook(food); foodCooked = true; } catch (InUseException) { foodcooked = false; } return foodCooked; } }
这段代码通过是否触发自定义异常InUseException,来决定方法Start()方法的返回值,这是典型的使用try catch语句块来控制流程的做法。
catch语句块捕获了InUseException,却没有处理InUseException,这不仅损失了程序的性能,也未体现自定义异常InUseException的价值。
这仅仅是一个常见的逻辑判断,我们用条件判断就可以了。
重构后
public class Microwave { private IMicrowaveMotor Motor { get; set; } public bool Start(object food) { if (Motor.IsInUse) return false; Motor.Cook(food); return true; } }
重构以后,代码的可读性增强了,还消除了捕捉异常带来的性能损失。
4. sURL = encodeURI(sURL)
使用encodeURI()编码,解决中文乱码问题
一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。
网址路径中包含汉字,使用encodeURI()编码,解决中文乱码问题,我们可以参考这篇文章学习下,
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介,这里我就不多讲了。
注意:本文为原创,转载请以链接形式标明本文地址 ,谢谢合作。
本文地址:http://www.cnblogs.com/wanghuih/p/5710189.html