浏览器
介绍
本示例使用[@ohos.systemparameter]接口和[Web组件]展示了一个浏览器的基本功能,展示网页,根据页面历史栈前进回退等。
效果预览
使用说明:
- 连接Wifi,启动应用,展示默认页面内容;
- 点击默认页面的图标跳转到对应网页,或者在输入框输入网址,点击右侧跳转按钮跳转到对应网页;
- 点击输入框左侧向右向左按钮进行页面的前进后退;
- 点击主页图标回到主页,点击加号按钮新建一个页面。
工程目录
entry/src/main/ets/
|---Application
| |---AbilityStage.ets // 入口
|---pages
| |---Index.ets // 首页
|---common
| |---PhoneLayout.ets // 窗口管理工具
| |---TitleBar.ets // 导航栏
|---model
| |---Logger.ts // 日志工具
| |---Browser.ets // 浏览器实例
具体实现
- Web展示与历史栈操作功能在Browser中,源码参考[Browser.ets]
/*
* Copyright (c) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Logger from './Logger'
import prompt from '@ohos.prompt';
export class WebObject {
controller: WebController;
isRegistered: boolean;
constructor(controller: WebController, isRegistered: boolean) {
this.controller = controller
this.isRegistered = isRegistered
}
}
@Observed
class WebKey {
key: number;
timestamp: number;
constructor(key: number, timestamp: number) {
this.key = key
this.timestamp = timestamp
}
}
export enum LoadingStatus {
LOADING,
END
}
const TAG: string = '[browser]'
export class Browser {
inputValue: string = ""
tabArrayIndex: number = 0
progress: number = 0
hideProgress: boolean = true
loadingStatus: LoadingStatus = LoadingStatus.END
webArray: Array< WebKey > = [new WebKey(0, new Date().getTime())]
tabsController: TabsController = new TabsController()
webControllerArray: Array< WebObject > = [new WebObject(new WebController(), false)]
deleteTab(index: number) {
Logger.info(TAG, `delete before tab index= ${index} controller length ${this.webControllerArray.length} tabArrayIndex= ${this.tabArrayIndex}`)
this.webArray.splice(index, 1)
this.webControllerArray.splice(index, 1)
if (this.tabArrayIndex > index || this.tabArrayIndex === this.webArray.length) {
this.tabArrayIndex -= 1
}
for (let i = index;i < this.webArray.length; ++i) {
this.webArray[i].key -= 1
}
for (let i = 0;i < this.webArray.length; ++i) {
Logger.info(TAG, `key ${this.webArray[i].key}, time=${this.webArray[i].timestamp}`)
}
Logger.info(`delete after tab index=${index}, controller length=${this.webControllerArray.length}, tabArrayIndex=${this.tabArrayIndex}`)
this.tabsController.changeIndex(this.tabArrayIndex)
}
getWebArray() {
return this.webArray
}
addTab() {
if (this.webArray.length > 10) {
prompt.showToast({
message: '页签数量已满'
})
return;
}
let webController: WebController = new WebController();
let object = new WebObject(webController, false)
this.webControllerArray.push(object)
this.webArray.push(new WebKey(this.webArray.length, new Date().getTime()))
this.tabArrayIndex = this.webArray.length - 1
Logger.info(TAG, `add tab index= ${this.tabArrayIndex}`)
setTimeout(() = > {
this.tabsController.changeIndex(this.tabArrayIndex)
}, 50)
}
setTabArrayIndex(tabArrayIndex: number) {
this.tabArrayIndex = tabArrayIndex
}
getTabArrayIndex() {
return this.tabArrayIndex
}
setInputVal(inputValue: string) {
this.inputValue = inputValue
}
getInputVal() {
return this.inputValue
}
loadUrl(addr: string) {
addr = "https://" + addr;
this.webControllerArray[this.tabArrayIndex].controller.loadUrl({ url: addr })
}
Back() {
if (this.webControllerArray[this.tabArrayIndex].controller.accessBackward()) {
this.webControllerArray[this.tabArrayIndex].controller.backward()
}
}
Forward() {
if (this.webControllerArray[this.tabArrayIndex].controller.accessForward()) {
this.webControllerArray[this.tabArrayIndex].controller.forward()
}
}
Refresh() {
this.webControllerArray[this.tabArrayIndex].controller.refresh()
}
}
- 加载网页及刷新:使用WebController提供的loadUrl可以加载目标网址内容,使用refresh方法刷新页面;
- 页面前进后退功能:页面在前进或者后退前使用accessForward/accessBackward查询是否有历史记录,然后调用forward/backward进行前进/后退操作。
依赖
不涉及。
约束与限制
- 本示例仅支持标准系统上运行;
- 本示例需外接鼠标进行验证;
- 本示例已适配API version 9版本SDK,版本号:3.2.11.9。
- 本示例不支持点击tab页签,切换网页并刷新页面;
- 本示例涉及使用系统接口:[@ohos.systemparameter],需要手动替换Full SDK才能编译通过。
- 本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。
下载
如需单独下载本工程,执行如下命令:
git init
git config core.sparsecheckout true
echo code/BasicFeature/Web/Browser/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
浏览器
+关注
关注
1文章
974浏览量
34421 -
鸿蒙
+关注
关注
55文章
1637浏览量
42120
发布评论请先 登录
相关推荐
鸿蒙实战项目开发:【短信服务】
、OpenHarmony 多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT) 技术知识点
如果你是一名An
发表于 03-03 21:29
js脚本怎么在浏览器中运行
。JavaScript广泛用于开发动态网页、浏览器扩展、移动应用等。当Web页面通过浏览器加载时,JavaScript脚本也会被浏览器解释
js文件可以直接浏览器运行吗
载和运行。 在Web开发中,JS常被用于实现动态交互效果和页面逻辑控制。通过将JS代码嵌入到网页的HTML文件中,浏览器可以在页面加载过程中自动执行JS,实现网页的动态效果和用户交互。 在HTML文件中,可以使用 当浏览器解析到
浏览器怎么打开javascript
浏览器是一种用于浏览和访问互联网页面的应用程序,而JavaScript是一种常用的网页编程语言,用于给网页添加交互和动态效果。本文将详细探讨如何在浏览器中打开JavaScript,并解释
浏览器需要支持javascript怎么解决
JavaScript是一种流行的脚本语言,用于对网页进行动态交互和功能增强。几乎所有现代浏览器都支持JavaScript,但在某些情况下,用户可能需要采取措施来确保浏览器支持JavaScript
浏览器支持javascript怎么设置
浏览器是我们上网冲浪的工具,而JavaScript是一种广泛使用的脚本语言,可以在网页中添加交互性和动态性。因此,确保浏览器正确支持JavaScript是非常重要的。 首先,我们需要理解什么是浏览器
浏览器javascript被禁用怎么解开
JavaScript是一种前端开发语言,通过运行在浏览器中的脚本来给网页增加动态交互和功能性。然而,有时候我们可能会遇到浏览器禁用JavaScript的情况,这会导致某些网页无法正常运行或功能受限
ie浏览器限制运行脚本
IE浏览器限制运行脚本是指在Internet Explorer浏览器中,存在一些限制和安全策略,以保护用户的电脑免受恶意脚本的攻击。这些限制有助于防止在浏览器中执行恶意代码,保护用户的隐私和电脑
python控制已经打开的浏览器
Python是一种广泛使用的编程语言,它具有强大的功能和丰富的库。其中一个功能就是控制已经打开的浏览器。这篇文章将详细介绍如何使用Python控制已经打开的浏览器,并提供一些实际的示例
如何使用Rust语言操作Chrome浏览器的SQLite数据库
Rust是一种高性能、可靠性强的系统编程语言,它的出现为开发者提供了一种新的选择。Rust的安全性和性能优势使得它成为了许多项目的首选语言,包括Web浏览器的开发。Chrome浏览器是
imx8mp chromium浏览器显示异常怎么解决?
我用imx8mp连接两个屏幕,显示不同。一个是lvds接口的屏,分辨率是1366*768,一个是HDMI显示器。如果你在HDMI屏幕上打开chromium浏览器到最大,浏览器屏幕也会显示在另一个屏幕上。
发表于 05-06 07:21
评论