整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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" 新页面会在新开的一个浏览器窗口打开