[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f-8y0_4_Dk40s928s09QUEPiO7TTffvGdhIveIM7GWXQ":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},118,"2024-07-20T11:14:14.489Z","web开发-从facebook的in-app browser浏览器中网页，唤起Safari 或者 谷歌chrome浏览器","## 一、概要\n安卓Android系统是可以实现从Facebook中的网页，唤起默认的浏览器。\n但是iOS最多能实现打开Safari，但是不能指定具体的网址。\n\n## 二、在安装了facebook的iPhone中，通过网页唤起Safari\n### 2.1 【不成功】：直接使用https 或者 http链接\n```js\nwindow.location.href = 'https://www.baidu.com'\n```\n\n没有Facebook的“跳转外部浏览器”的弹窗出现，依然还是在Facebook的browser中刷新\n\n### 2.2 【不成功】：通过ftp协议使用中转用的index.html\nfacebook中打开的网页\n```js\nwindow.location.href = `ftp://43.xxx.xxx.xxx/index.html`\n```\n中转网页中\n```js\nwindow.open(”https://www.baidu.com”, “_self”);\n```\nSafari已经不支持ftp协议。\n![safari的ftp不支持.png](https://image.xinwei.ltd/11721472897038.png)\n\n能弹出Facebook的“跳转外部浏览器”的弹窗，点“确定”后可以唤起Safari，但是Safari中的中转index.html不能解析，Safari的白色提示页面提示“ftp url is blocked”\n\n### 2.3 【半成功】：通过x-web-search://协议\n```js\nconst currentLink = location.href\nconst link = currentLink.replace('https://', '').replace('http://', '').replace('www.', '')\nwindow.location.href = `x-web-search://${link}`\n```\n能弹出Facebook的“跳转外部浏览器”的弹窗，点“确定”后可以唤起Safari，但是进入的是Safari的默认搜素引擎的搜索界面，搜索输入框中是link的参数部分\n\n如果使用以下的方式，那么只会出现一个网址是空的Safari界面\n```js\nwindow.location.href = `x-web-search://`\n```\n## 三、在iOS上唤起iOS版谷歌浏览器\n```js\nwindow.location = `googlechrome://${link}`// ios to chrome\n```\n\n## 四、在安装了Facebook的Android手机中唤起chrome\n```js\nconst currentLink = location.href\nconst link = currentLink.replace('https://', '').replace('http://', '').replace('www.', '')\n\nif (ua.isAndroid()) {\n    window.location.href = `intent://${link}#Intent;scheme=https;end`// android\n}\n```\n\n或者使用：\n```js\n\u003Cscript>\n    function isFacebookApp() {\n        var ua = navigator.userAgent || navigator.vendor || window.opera;\n        return (ua.indexOf(\"FBAV\") > -1) || (ua.indexOf(\"FBAN\") > -1);\n    }\nif (isFacebookApp()) {\n    var currentLink = location.href;\n    if (currentLink.indexOf('https') > -1) {\n        var currentLink = currentLink.replace('https://', '');\n        currentLink = currentLink.replace('www.', '');\n        var chromeLink = \"intent://\" + currentLink + \"#Intent;scheme=https;package=com.android.chrome;end\";\n        window.location.href = chromeLink;\n    }\n    if (currentLink.indexOf('http') > -1) {\n        var currentLink = currentLink.replace('http://', '');\n        currentLink = currentLink.replace('www.', '');\n        var chromeLink = \"intent://\" + currentLink + \"#Intent;scheme=http;package=com.android.chrome;end\";\n        window.location.href = chromeLink;\n    }\n} \n\u003C/script> \n```\n\n## 五、 以下是一些测试过跳转的不成功代码逻辑\n```js\n// tryOpenDefault(() => {\n        //     window.open(url, '_blank');\n        // }, 1000)\n        \n        // tryOpenDefault(() => {\n        //     window.location.href = url;\n        // }, 2000)\n        \n        // tryOpenDefault(() => {\n        //     window.open(url, '_system');\n        // }, 3000)\n        \n        // tryOpenDefault(() => {\n        //     window.location.href = 'intent://' + url + '#Intent;' + 'scheme=https;end';\n        // }, 4000)\n        \n        // 会弹出跳转box，但是又快速退出回到帖子页\n        // tryOpenDefault(() => {\n        //     var a = document.createElement('a');\n        //     a.setAttribute('href', url);\n        //     a.setAttribute('target', '_blank'); // Ensures it opens in a new tab/window\n        //     a.click();\n        // }, 5000)\n  \n  \n  \n  // window.location.href = `prefs://${link}`\n                \n                // window.location.href = `x-safari-https://${link}` // box but not jump\n                \n                // window.location.href = `site://${link}` // not work\n                \n                // not work\n                // var a = document.createElement('a');\n                // a.setAttribute('href', currentLink);\n                // a.setAttribute('target', '_blank'); // Ensures it opens in a new tab/window\n                // a.click();\n                \n                // not work again\n                // var a = document.createElement('a');\n                // a.setAttribute('href', currentLink);\n                // a.setAttribute('target', '_blank'); // Ensures it opens in a new tab/window\n                // var dispatch = document.createEvent(\"HTMLEvents\");\n                // dispatch.initEvent(\"click\", true, true);\n                // a.dispatchEvent(dispatch);\n                    \n                // window.open(location.href, '_blank') // not work\n                // window.location.href = location.href // not work\n                // window.location.href = `safari://${currentLink}` // can prompt box, but can not jump still\n                // window.location.href = `safari://${link}`// can prompt box, but can not jump\n                // window.location.href = `googlechrome://${link}`// can open chrome\n```\n\n## 六、总结\n目前经过各种尝试发现，在安卓上确实是可以通过intent的方式唤起系统的浏览器，但是iOS的Safari浏览器，并没有合适的方法唤起浏览器并打开对应的网址。\n\n所以如果在iOS上的Facebook或者是其他app的内置浏览器（即in-app browser）上，想仅仅只通过web中来实现是做不到的。除非这个in-app浏览器所在的app是可以内置我们自己的代码的。\n\n因为在iOS系统中，app打开Safari的方式都是通过iOS的系统API：\n```js\n[[UIApplication sharedInstance] openUrl:@\"https://xxx.xxx.xxx\"]\n```\n这样的方式来实现跳转Safari的。所以除非web和app有通信机制，调用iOS原生代码的这个API。\n\n而且即使通过在Mac上的应用程序右键Safari浏览器，点击“查看内容”，打开Safari应用的`info.plist`，查看Safari的`URL Scheme`，也就只有有限的`http`、`https`、`ftp`等深链接。\n我在Mac上测试时，发现是可以通过以下代码：（有点忘了是不是safari开头，应该还有一个`x-safari-http`的scheme头，还是`webkit:`这个）\n```js\nwindow.location.href = `safari://43.xxx.xxx.xxx/index.html`\n```\n在Mac上是可以从谷歌Chrome浏览器跳转打开Safari的，但是在移动端是不行的。\n\n\n所以在iOS的第三方app的内置浏览器中，想打开系统Safari浏览器，最好还是要做一个引导的浮层，指向右上角的三个点，引导用户主动点击Facebook等第三方app的“打开外部浏览器”选项。\n\n\n\n","在一些面向海外的项目中，有时候经常绕不开Google和Facebook这2个巨大的平台。最常见的就是Google登录和Facebook登录，但是在一些项目推广和广告相关的需求，难免会遇到打开mobile的默认浏览器，以提高web项目的用户体验或者避免Google和Facebook的内置浏览器的限制。","https://image.xinwei.ltd/11721472897038.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",3220,0,"web facebook,facebook web,facebook integrate,facebook开发,facebook集成"]