打开网页

接口声明

在manifest.json文件的 features属性中增加如下配置。

{"name": "system.webview"}

导入模块

在调用接口页面的<script>部分增加如下配置。

import webview from '@system.webview'

或

var webview = require("@system.webview")

使用限制

接口定义

webview.loadUrl(OBJECT)

描述

打开网页，标题栏样式与打开webview的页面的标题栏样式相同，在webview的useragent后追加内容，格式是hap/<平台版本号>/<厂商标识> <平台应用包名>/<平台应用版本号> <应用包名>/<应用版本号> (<来源信息>)。“来源信息”与app接口的getInfo方法返回结果中的source字段相同。Webview接口支持文件下载能力。

OBJECT参数

示例代码

webview.loadUrl({
    url:'https://www.example.com',
    allowthirdpartycookies: false
})

webview.loadCustomTabsUrl(OBJECT) (1078+，非厂商联盟规范)

描述

使用CustomTabs打开网页，并根据传入参数自定义华为浏览器的外观和风格。

OBJECT参数

options参数

示例代码

webview.loadCustomTabsUrl({
  url: 'https://www.toutiao.com',
  options: {
    toolBarColor: '#FF00FF',
    showTitle: 'false',
    addDefaultShareMenuItem: true,
    navigationBarColor: '#00BFFF',
    enableUrlBarHiding: 'true',
    isOpenAdFilter: false,
    isOpenBlockTrackingCookies: true,
    whenAboutBlankClose: true,
    colorScheme: 'COLOR_SCHEME_DARK'
  },
})

webview.preloadCustomTabsUrl(OBJECT) (1078+，非厂商联盟规范)

描述

预加载网页Url。

参数

示例代码

webview.preloadCustomTabsUrl({
  url: "https://www.huawei.com/",
  success: function (data) {
    prompt.showToast({
      message: data
    })
  },
  fail: function (data) {
    prompt.showToast({
      message: data
    })
  }
})

webview.getCustomTabsVersion() (1078+，非厂商联盟规范)

描述

获取手机上Custom Tabs能力是否可用，以及支持特性。

返回值

示例代码

const res = webview.getCustomTabsVersion()
prompt.showToast({
  message: 'CustomTabsVersion: ' + res.cctVersion
})

system.go(path)

描述

WebView内部API，在webview打开的网页中可以使用的API。跳转到当前应用的指定页面。

参数

示例代码

system.go("/detail?param1=value1")

Demo

<template>
    <div>
        <div>
            <text>{{componentName}}</text>
        </div>
        <div>
            <input type="button" onclick="loadUrl" value="打开华为官网" />
        </div>
        <div>
            <input type="button" onclick="loaddownLoadUrl" value="打开带下载链接的网页" />
        </div>
        <div>
            <input type="button" onclick="loadFileUploadSupportUrl" value="打开webview支持文件上传网页" />
        </div>
        <div>
            <input type="button" onclick="allowthirdcookie" value="支持cookie跨域" />
        </div>
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
</style>
<script>
    import webview from '@system.webview'
    export default {
        data: {
            componentName: 'webview'
        },
        onInit: function () {
            this.$page.setTitleBar({ text: 'webview' })
        },
        loadUrl: function () {
            webview.loadUrl({
                url: 'https://www.huawei.com/'
            });
        },
        loaddownLoadUrl: function () {
            webview.loadUrl({
                url: 'https://www.toutiao.com'
            });
        },
        loadFileUploadSupportUrl() {
            webview.loadUrl({
                url: "https://lfmemberdev.hwcloudtest.cn:9094//fastapp/download/webview/file_chooser_demo_3.html"
            });
        },
        allowthirdcookie: function () {
            webview.loadUrl({
                url: 'https://page.cainiao.com/mcn/publichome/pkg.html',
                // url: "https://www.hao123.com/",
                allowthirdpartycookies: true
            });
        }
    }
</script>

版本更新说明

相关链接

FAQ

• 打开一个H5页面，能修改标题吗？
• 使用webview接口打开网页后，无法滚动页面，如何处理？
• webview打开H5网页时，支持网页中配置的多窗口属性吗？

案例

webview接口打开网页，网页会被自动放大