web開發-從facebook內置瀏覽器中網頁，喚起Safari或chrome瀏覽器

、概要

安卓Android系統是可以實現從Facebook中的網頁，喚起默認的瀏覽器。
但是iOS最多能實現打開Safari，但是不能指定具體的網址。

二、在安裝了facebook的iPhone中，通過網頁喚起Safari

2.1 【不成功】：直接使用https 或者 http鏈接

window.location.href = 'https://www.baidu.com'

沒有Facebook的“跳轉外部瀏覽器”的彈窗出現，依然還是在Facebook的browser中刷新

2.2 【不成功】：通過ftp協議使用中轉用的index.html

facebook中打開的網頁

window.location.href = `ftp://43.xxx.xxx.xxx/index.html`

中轉網頁中

window.open(”https://www.baidu.com”, “_self”);

Safari已經不支持ftp協議。

能彈出Facebook的“跳轉外部瀏覽器”的彈窗，點“確定”后可以喚起Safari，但是Safari中的中轉index.html不能解析，Safari的白色提示頁面提示“ftp url is blocked”

2.3 【半成功】：通過x-web-search://協議

const currentLink = location.href
const link = currentLink.replace('https://', '').replace('http://', '').replace('www.', '')
window.location.href = `x-web-search://${link}`

能彈出Facebook的“跳轉外部瀏覽器”的彈窗，點“確定”后可以喚起Safari，但是進入的是Safari的默認搜素引擎的搜索界面，搜索輸入框中是link的參數部分

如果使用以下的方式，那么只會出現一個網址是空的Safari界面

window.location.href = `x-web-search://`

三、在iOS上喚起iOS版谷歌瀏覽器

window.location = `googlechrome://${link}`// ios to chrome

四、在安裝了Facebook的Android手機中喚起chrome

const currentLink = location.href
const link = currentLink.replace('https://', '').replace('http://', '').replace('www.', '')

if (ua.isAndroid()) {
    window.location.href = `intent://${link}#Intent;scheme=https;end`// android
}

或者使用：

<script>
    function isFacebookApp() {
        var ua = navigator.userAgent || navigator.vendor || window.opera;
        return (ua.indexOf("FBAV") > -1) || (ua.indexOf("FBAN") > -1);
    }
if (isFacebookApp()) {
    var currentLink = location.href;
    if (currentLink.indexOf('https') > -1) {
        var currentLink = currentLink.replace('https://', '');
        currentLink = currentLink.replace('www.', '');
        var chromeLink = "intent://" + currentLink + "#Intent;scheme=https;package=com.android.chrome;end";
        window.location.href = chromeLink;
    }
    if (currentLink.indexOf('http') > -1) {
        var currentLink = currentLink.replace('http://', '');
        currentLink = currentLink.replace('www.', '');
        var chromeLink = "intent://" + currentLink + "#Intent;scheme=http;package=com.android.chrome;end";
        window.location.href = chromeLink;
    }
} 
</script>

五、以下是一些測試過跳轉的不成功代碼邏輯

// tryOpenDefault(() => {
        //     window.open(url, '_blank');
        // }, 1000)
        
        // tryOpenDefault(() => {
        //     window.location.href = url;
        // }, 2000)
        
        // tryOpenDefault(() => {
        //     window.open(url, '_system');
        // }, 3000)
        
        // tryOpenDefault(() => {
        //     window.location.href = 'intent://' + url + '#Intent;' + 'scheme=https;end';
        // }, 4000)
        
        // 會彈出跳轉box，但是又快速退出回到帖子頁
        // tryOpenDefault(() => {
        //     var a = document.createElement('a');
        //     a.setAttribute('href', url);
        //     a.setAttribute('target', '_blank'); // Ensures it opens in a new tab/window
        //     a.click();
        // }, 5000)
  
  
  
  // window.location.href = `prefs://${link}`
                
                // window.location.href = `x-safari-https://${link}` // box but not jump
                
                // window.location.href = `site://${link}` // not work
                
                // not work
                // var a = document.createElement('a');
                // a.setAttribute('href', currentLink);
                // a.setAttribute('target', '_blank'); // Ensures it opens in a new tab/window
                // a.click();
                
                // not work again
                // var a = document.createElement('a');
                // a.setAttribute('href', currentLink);
                // a.setAttribute('target', '_blank'); // Ensures it opens in a new tab/window
                // var dispatch = document.createEvent("HTMLEvents");
                // dispatch.initEvent("click", true, true);
                // a.dispatchEvent(dispatch);
                    
                // window.open(location.href, '_blank') // not work
                // window.location.href = location.href // not work
                // window.location.href = `safari://${currentLink}` // can prompt box, but can not jump still
                // window.location.href = `safari://${link}`// can prompt box, but can not jump
                // window.location.href = `googlechrome://${link}`// can open chrome

六、總結

目前經過各種嘗試發現，在安卓上確實是可以通過intent的方式喚起系統的瀏覽器，但是iOS的Safari瀏覽器，并沒有合適的方法喚起瀏覽器并打開對應的網址。

所以如果在iOS上的Facebook或者是其他app的內置瀏覽器（即in-app browser）上，想僅僅只通過web中來實現是做不到的。除非這個in-app瀏覽器所在的app是可以內置我們自己的代碼的。

因為在iOS系統中，app打開Safari的方式都是通過iOS的系統API：

[[UIApplication sharedInstance] openUrl:@"https://xxx.xxx.xxx"]

這樣的方式來實現跳轉Safari的。所以除非web和app有通信機制，調用iOS原生代碼的這個API。

而且即使通過在Mac上的應用程序右鍵Safari瀏覽器，點擊“查看內容”，打開Safari應用的info.plist，查看Safari的URL Scheme，也就只有有限的http、https、ftp等深鏈接。
我在Mac上測試時，發現是可以通過以下代碼：（有點忘了是不是safari開頭，應該還有一個x-safari-http的scheme頭，還是webkit:這個）

window.location.href = `safari://43.xxx.xxx.xxx/index.html`

在Mac上是可以從谷歌Chrome瀏覽器跳轉打開Safari的，但是在移動端是不行的。

所以在iOS的第三方app的內置瀏覽器中，想打開系統Safari瀏覽器，最好還是要做一個引導的浮層，指向右上角的三個點，引導用戶主動點擊Facebook等第三方app的“打開外部瀏覽器”選項。

用場景

首先我們要明白，為什么需要使用自定義tab欄
大家首先看一下uniapp關于原生tab跳轉的api文檔
https://uniapp.dcloud.net.cn/api/router.html#switchtab
大家可以清楚的看到，switchTab和navigateTo的差異為url后面是否可以攜帶參數
當我們在做一個簡單的uniapp項目時，可能tab之間的切換，或者從其他頁面前往tab頁面的時候，不需要攜帶參數。但是，一旦我們需要攜帶參數跳轉到tab頁面的時候，原生的tab頁面無法實現參數的攜帶。這個時候，我們就需要去構建一個通用的tab組件去實現它的跳轉。并且，原生tab欄不支持你在上面做太多的樣式拓展

缺點

在使用原生tab時，你會發現，tab之間的互相切換，并不會重新渲染頁面。頁面上的onload方法也不會再次被執行，切換的時候非常的絲滑。但如果你是用自定義tab欄時，你會發現，如果你使用navigateTo去完成tab頁面的跳轉，會造成頁面棧的堆疊。

代碼示例

tml概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

html基本結構

一個html的基本結構如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>網頁標題</title>
 </head>
 <body>
 網頁顯示內容
 </body>
</html>

第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。

HTML文檔類型

目前常用的兩種文檔類型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。

此版本文檔用sublime text創建方法： html:xt + tab

文檔示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文檔類型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab

文檔示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文檔類型 </title>
</head>
<body>
</body>
</html>

兩種文檔的區別

1、文檔聲明和編碼聲明

2、html5新增了標簽元素以及元素屬性

html注釋：

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：

<!-- 這是一段注釋 -->

html標題標簽

通過

、

,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：

用作主標題，其后是

，再其次是

，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

html段落標簽、換行標簽與字符實體

html段落標簽

標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的
 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
 </p>
 <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方
 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網
 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
</body>
</html>

html換行標簽

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入

來強制換行，代碼如下：

<p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
</p>

html字符實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：

<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： -->
<p>
 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：

<!-- “<” 和 “>” 的字符實體為 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html塊標簽、含樣式的標簽

html塊標簽

1、

標簽塊元素，表示一塊內容，沒有具體的語義。

2、標簽行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標簽

1、 標簽行內元素，表示語氣中的強調詞

2、標簽行內元素，表示專業詞匯

3、 標簽行內元素，表示文檔中的關鍵字或者產品名

4、標簽行內元素，表示非常重要的內容

語義化的標簽

語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。

html圖像標簽、絕對路徑和相對路徑

html圖像標簽

標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：

src屬性定義圖片的引用地址

alt屬性定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

絕對地址：相對于磁盤的位置去定位文件的地址

相對地址：相對于引用文件本身去定位被引用的文件地址

絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：

“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。

“ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

html鏈接標簽

標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：

href屬性定義跳轉的地址

title屬性定義鼠標懸停時彈出的提示文字框

target屬性定義鏈接窗口打開的位置

target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開

target="_blank" 新頁面會在新開的一個瀏覽器窗口打開

在線咨詢

上一篇：月入5W的職場贏家都懂的PDF一鍵轉換方法，可惜知道的人實在太少
下一篇：淺談十個國內視頻網站這幾年的進化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商