Web Page Opening

API Declaration

Add the following configuration to the features attribute in the manifest.json file:

{"name": "system.webview"}

Module Import

Add the following configuration to the script element on the page where the API will be called:

import webview from '@system.webview'

Or

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

Application Scope

Definition

[h2]webview.loadUrl(OBJECT)

Description

Opens a web page. The title bar style of this web page is the same as that of the WebView page to be displayed. Add content after WebView UserAgent. The format is hap/<Platform version number>/<Vendor ID><Platform app package name>/<Platform app version number><App package name>/<App version number> (<Source>). The source here is the same as that in the result returned by the getInfo method of an app API. The WebView API supports file download.

For HTTPS websites, you are advised not to use any HTTP links on the page. Otherwise, man-in-the-middle attacks may occur. This is because quick apps do not differentiate HTTP and HTTPS scenarios at the underlying implementation layer.

OBJECT parameters

Sample code

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

[h2]webview.loadCustomTabsUrl(OBJECT) (1078+, Not Formulated by the Vendor Alliance)

Description

Opens a web page using Custom Tabs and defines the appearance and style of HUAWEI Browser based on input parameters.

OBJECT parameters

options parameters

Sample code

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'
  },
})

[h2]webview.preloadCustomTabsUrl(OBJECT) (1078+, Not Formulated by the Vendor Alliance)

Description

Preloads the URL of a web page.

Parameters

Sample code

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

[h2]webview.getCustomTabsVersion() (1078+, Not Formulated by the Vendor Alliance)

Description

Checks whether the Custom Tabs feature and relevant features are available on a mobile phone.

Returns

Sample code

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

[h2]system.go(path)

Description

Redirects a user from a web page opened by the WebView to the specified page of the current app.

Parameters

Sample code

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

Demo

<template>
    <div>
        <div>
            <text>{{componentName}}</text>
        </div>
        <div>
            <input type="button" onclick="loadUrl" value="Open the Huawei official website." />
        </div>
        <div>
            <input type="button" onclick="loaddownLoadUrl" value="Open the web page with a download link." />
        </div>
        <div>
            <input type="button" onclick="loadFileUploadSupportUrl" value="Open the WebView to support file upload." />
        </div>
        <div>
            <input type="button" onclick="allowthirdcookie" value="Support passing cross-domain cookies." />
        </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>

Version Change History

Links

[h2]FAQs

• Can I change the title of an HTML5 page?
• What should I do if the web page cannot be scrolled after being opened using the WebView API?
• Is the multi-window attribute supported when an HTML5 page is opened through the WebView API?

[h2]Cases

Web Page Opened By Calling the webview API Is Automatically Zoomed In On