JavaScript-打開新頁面的方法？

indow.open()

<button id="go">點擊我</button>

<script>
  document.getElementById("go").addEventListener("click", () => {
    openUrl("https://so.toutiao.com/search?dvpf=pc&keyword=Plzbefat");
  });

  function openUrl(url) {
    window.open(url);
  }
</script>

a標簽

<a href="https://so.toutiao.com/search?dvpf=pc&keyword=Plzbefat" target="_blank"
  >點擊我</a
>

a 標簽自帶部分樣式 , 點擊過后會有顏色差

target參數詳解:

_self: 新網頁在當前的頁面打開，不填參數則就是當前頁面打開。
_blank: 新網頁在新窗口打開。
_parent: 沒有iframe的話在當前的頁面打開。
_top: 沒有iframe的話在當前的頁面打開。

什么時候用a標簽什么時候用window.open?

一般使用a標簽是不需要帶上js邏輯的 , 這樣使用起來簡單明了 , 其余情況就使用 window.open() 就可以啦.

但是目前大多數使用 a 標簽的時候 , 都覺得它原有的樣式太丑 , 所以覆蓋樣式也是基本操作 .

css 對a標簽的樣式覆蓋:

<style>
  /* 未點擊過鏈接*/
  a:link {
    color: red;
  }

  /* 已經點擊過鏈接 */
  a:visited {
    color: green;
  }

  /* 鼠標移動到a標簽上方 */
  a:hover {
    color: hotpink;
  }

  /* 按住不放鏈接的時候 */
  a:active {
    color: blue;
  }

  /* a標簽的下劃線 */
  a {
    text-decoration: none;
  }
</style>
<a href="https://so.toutiao.com/search?dvpf=pc&keyword=Plzbefat" target="_blank"
  >頭條@Plzbefat</a
>

看看顏色和下劃線

單擊帶有超鏈接的文件時，超鏈接的內容有多種，打開方式，如替換當前頁打開，在新窗口打開等。而用來指定打開方式的是＜a>標簽的target屬性。

如果在一個<a>標簽內容含一個target屬性，瀏覽器將會載入和顯示用這個標簽的href屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或id的框架或者窗口不存在，瀏覽器將打開一個新窗口，并給這個窗口一個指定的標記，然后將新的文檔載入那個窗口。從此以后，超鏈接文檔就可以指向這個新的窗口。

target屬性的代碼格式如下：

其中value有四個參數可用，這4個保留的目標名稱用作特殊的文檔重定向操作。

（1）-blank。瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。

（2）-self。這個目標的值對所有未指定目標的<a>標簽是默認目標，使得目標文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的，除非和文檔標題 <base>標簽中的target屬性一起使用。

（3）-parent。這個目標使得文檔載入父窗口或者包含超鏈接引用的框架的框架集。如果這個引用是在窗口或者頂級框架中，那么它與目標-self等效。

（4）-top。這個目標使的文檔載入包含這個超鏈接的窗口，用-tap目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。

小提示：這些target的所有4個值都以下劃線開始。任何其他用一個下劃線作為開頭的窗口或者目標都會被瀏覽器忽略，因此，不要將下劃線作為文檔中定義的任何框架name或id的第一個字符。

下面舉例說明target屬性的使用方法。

(1)編寫代碼如下圖所示：

（2）在瀏覽器中打開文件，預覽效果如下所示：

（3）單擊超鏈接，在新窗口打開連接頁面，下圖所示

（4）修改代碼并單擊鏈接。

將“-blank”換成“-self”，即代碼修改為“<a target="_self">新浪</a>”，單擊鏈接后，直接在當前窗口打開新鏈接，如圖所示：

、概要

安卓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的“打開外部瀏覽器”選項。

在線咨詢

上一篇：TypeScript基礎傻瓜式教程，輕松上手
下一篇：HTML中使用<a>標簽實現文本內鏈接-零基礎自學網頁制作

您的項目需求

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

整合營銷服務商