兼容各个浏览器的页面收藏效果

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