當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

發布時間：2023/12/19 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近為了更好地接觸移動Web 開發狠心購買了一臺ipad mini(之前一直都是借同學的，借多了就不好意思了)。拿來調試DeveMobile 與EaseMobile 主題?時候發現了不少問題，現在在一個個解決中。其中一個就是這個iOS Web APP中點擊鏈接跳轉到Safari 瀏覽器新標簽頁(窗口)的問題。

問題說明

iOS 上的Safari 瀏覽器中有一個“發送到屏幕”的功能(雖然很多小白用戶都不知道這個)，用戶是可以把網站的URL以一個快捷方式的形式添加到主屏幕的，展示形式跟原生的應用是一樣并最大限度地模擬本地APP 的效果(當然，需要開發者本身做一些代碼層面的設置，見《將你的網站打造成一個iOS Web App》、《iOS / Android 移動設備中的 Touch Icons》這兩篇文章)。此所謂?Web APP 是也。?DeveMobile 與EaseMobile 主題?也有這個功能。不過，現在發現了個問題，就是通過主屏幕上點擊進入Web APP 形式的網頁時候，點擊任何一個鏈接就會跳轉到Safari 瀏覽器并新建一標簽頁打開所屬鏈接——這個功能真心惡心，如果這樣的話還是Web APP嗎？真不知蘋果怎么想的，人家安卓的也不會這樣啊。

問題解決

出來問題自然就要搜索解決方法了(不好意思，自行寫代碼解決不會)。在國外問答網站?stackoverflow 發現有不少這個問題，如iPhone Safari Web App opens links in new window、Keep web app in standalone mode on iPhone?。后來Jeff 在這里找到了一段不錯的代碼，實地測試在本人的?ipad mini (?iOS 7.1)上測試通過，根據作者的敘述，最新的?iOS 7.0.4(iPhone 與 iPad)測試通過，代碼應該兼容性不錯，在這里分享：

//iOS Web APP中點擊鏈接跳轉到Safari 瀏覽器新標簽頁的問題 devework.com

//stanislav.it/how-to-prevent-ios-standalone-mode-web-apps-from-opening-links-in-safari

if(("standalone" in window.navigator) && window.navigator.standalone){

var noddy, remotes = false;

document.addEventListener('click', function(event) {

noddy = event.target;

while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {

noddy = noddy.parentNode;

}

if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))

{

event.preventDefault();

document.location.href = noddy.href;

}

},false);

}