兼容各個瀏覽器的頁面收藏效果

時間  2020-06-17
標籤 兼容 各個 瀏覽器 頁面 收藏 效果 欄目 瀏覽器 简体版
原文   原文鏈接

1. 功能描述:javascript

把頁面加入收藏功能，兼容各個瀏覽器html

注意:java

有些瀏覽器的設置就是不支持用js來把頁面加入收藏夾,只能讓用戶手動去在瀏覽器或者按鍵去設置這些功能,這裏說的兼容是指當瀏覽器有這個設置的時候js會有提示.web

1.ie使用：window.external.addFavorite()chrome

2. Firefox瀏覽器

3.其餘主流瀏覽器（chrome、opera、safari）其餘瀏覽器沒有此功能，不過能夠提醒用戶使用ctrl+d的方法手動添加安全

代碼運行嘗試1：ide

//加入收藏夾
    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>

這段代碼是網上經常使用的收藏代碼，包括我如今工做的地方項目網站也是這麼寫的，但實際上......函數

咱們來測試一下吧post

測試瀏覽器：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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程