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


    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

  • 相关阅读:
    页面返回劫持js代码
    js向input赋值
    JavaScript中统计Textarea字数并提示还能输入的字符
    dedecms 列表页调用文章列表时对有无缩略图进行判断调用
    常用mate标签-常用mate标签
    dedecms修改arc.listview.class.php实现列表页支持mip
    extend简单用法
    splice从数组中删除指定定数据
    递归【输入一个日期】返回【前12个月每月最后一天】
    三步把asp.net core 3.1应用部署到centos7
  • 原文地址:https://www.cnblogs.com/wanghuih/p/5710189.html
Copyright © 2020-2023  润新知