Trust
Trust
  • 发布:2016-07-25 11:24
  • 更新:2019-01-26 21:58
  • 阅读:15212

【示例】5+实现简单的内置浏览器制作

分类:HTML5+

需求描述

在当前App中打开一个外部网站,并在外部网站可以进行前进、后退以及立即返回当前webview等操作。

需求分析

依据上述需求的描述,可以理解为该App需要一个内置浏览器,用于访问外部网站。为什么会这样理解呢?
做为一个程序猿(媛),尤其是前端程序猿(媛),对浏览器一定不会陌生。常规的浏览器,可以大致两大部分:菜单栏和页面展示区。
再回到之前的需求描述部分,前进、后退以及返回App功能,可以当作菜单栏;外部网站部分,当作页面展示区。

实现思路

mui提供了父子页面的思路来解决卡头卡尾页面的不流畅,同样可以利用这种结构来实现这个简单的内置浏览器。
父页面作为菜单栏,子页面作为页面展示区。并且通过父页面的元素,来控制子页面中展示部分的切换以及父页面的关闭。

功能实现

下面以访问百度为例,制作一个简单的内置浏览器。

创建浏览器

其实,mui中的父子页面形式,是通过HTML5+API提供的获取当前窗口的WebviewObject对象创建新的Webview窗口,以及在Webview窗口中添加子窗口实现的。

var self = plus.webview.currentWebview();  
var baiduWV = plus.webview.create("http://www.baidu.com", "baidu", {  
    top: "44px",  
    bottom: 0  
});  
self.append(baiduWV);  

页面前进

HTML5+API提供了查询Webview窗口是否可前进以及前进到上次加载的页面方法,依据这两个方法控制子窗口中页面的前进。

baiduWV.canForward(function(event) {  
    var canForward = event.canForward;  
    if(canForward) {  
        baiduWV.forward();  
    } else {  
        alert("不能前进!");  
    }  
});  

页面后退

HTML5+API相应的,也提供了查询Webview窗口是否可后退以及后退到上次加载的页面方法,依据这两个方法控制子窗口中页面的后退。

baiduWV.canBack(function(event) {  
    var canBack = event.canBack;  
    if(canBack) {  
        baiduWV.back();  
    } else {  
        alert("到头了,要关闭页面了!");  
        // 执行重写前的back方法  
        old_back();  
    }  
});  

关闭浏览器

关闭就相对简单了,直接直接mui.back()就可以了,或者更方便得方法就是给元素添加.mui-action-back类。

<h1 class="mui-title mui-action-back" id="close_page">直接关闭当前页面</h1>  

示例效果

源码

附上源码,真机运行即可。

23 关注 分享
331647417@qq.com lhyh 好冷 啦啦啦啦 zpy1_126@126.com 邓尼玛_ shwanYu Element 无夜光明 xwiwi@foxmail.com jwenlee 师大酸梅杨 Neil_HL 951240778@qq.com fq1798@163.com 云端笔记 h@feng0.com 770867893@qq.com simon8 513576480@qq.com 一路格桑花 791155030@qq.com xpanda

要回复文章请先登录注册

307594386@qq.com

307594386@qq.com

不错
2019-01-26 21:58
波

请问,返回能做到不刷新吗
2019-01-04 11:14
小U的主人

小U的主人

mark
2018-08-16 11:36
306459054@qq.com

306459054@qq.com

回复 qs3h819@163.com:
重写安卓手机返回键方法应该就可以了
2018-08-16 11:35
biubiu灬

biubiu灬

感谢分享!!!
2018-07-29 09:33
jojo_4421@163.com

jojo_4421@163.com

感谢感谢~么么哒
2018-07-11 17:54
一路格桑花

一路格桑花

感谢分享!
2018-07-03 15:41
513576480@qq.com

513576480@qq.com

不错很好的方法。
2018-06-08 23:25
simon8

simon8

解决了问题, 感谢分享
2018-03-09 10:27
h@feng0.com

h@feng0.com

学习一下
2017-12-14 20:09
qs3h819@163.com

qs3h819@163.com

Android手机,返回键,如何让它回退子页,而不是一下子就退回到首页?如果能实现 就完美了很多。
2017-11-24 21:08
conanhawke@qq.com

conanhawke@qq.com

不错喔
2017-10-09 17:31
conanhawke@qq.com

conanhawke@qq.com

不错的
2017-10-09 17:06
SixGodWill

SixGodWill

非常非常感谢!一直需要这个!
2017-07-14 14:51
mingtianfu

mingtianfu

不错
2017-05-29 16:25
fq1798@163.com

fq1798@163.com

牛逼。
2017-05-03 12:10
951240778@qq.com

951240778@qq.com

解决了两个礼拜遇到的问题
2017-04-20 17:01
253681872@qq.com

253681872@qq.com

webview打开后如何移动、放大缩小啊?
2017-02-20 10:36
296386505@qq.com

296386505@qq.com

为什么下载不了demo
2016-12-21 17:36
649085005@qq.com

649085005@qq.com

感谢分享 关注一下!
2016-10-10 11:17
Element

Element

非常感谢
2016-10-10 08:06
shwanYu

shwanYu

如何监听返回按钮,使主页面上打开的网页返回上一次的网页,谢谢!
2016-09-28 12:48
shwanYu

shwanYu

非常感谢
2016-09-27 16:01
邓尼玛_

邓尼玛_

谢谢分享,马了
2016-09-21 13:43
zpy1_126@126.com

zpy1_126@126.com

感谢分享,关注一下
2016-09-19 17:49
梦幻果哥

梦幻果哥

怎么拿到跳转的地址啊
2016-09-08 13:30
啦啦啦啦

啦啦啦啦

感谢分享,解决了问题
2016-08-17 16:44
ztingjian

ztingjian

感谢分享,关注一下
2016-07-29 14:48
好冷

好冷

感谢分享!
2016-07-27 15:52
Jauns

Jauns

感谢分享,关注一下
2016-07-26 10:03
lhyh

lhyh

感谢分享!
2016-07-25 14:19