This page is translated by Google Cloud Translation API

Switch to Chinese

If you need to modify the default error page style, you can customize the 404 and other error pages of Webview through the following methods.

Set custom error page

Visual interface configuration

Note: It is recommended to use html files and put them in the hybrid/html folder in the project root directory

Source view configuration Open the manifest.json file of the project, switch to the "source view", and configure the error page path according to the project type. It is recommended to use the local address, which is relative to the application root directory; setting the url attribute value to "none" means to disable the custom error page function , the system default error page content is displayed when the page is loaded with errors.

• uni-app project Configure the custom error page path in the url attribute of the "app-plus" -> "error" node, for example:

  "app-plus": {
    "error": {
      "url": "hybrid/html/error.html"
    },
    //...
  },
  //...

• 5+App/Wap2App projects Configure the custom error page path in the url attribute of the "plus" -> "error" node, for example:

  "plus": {
    "error": {
      "url": "error.html"
    },
    //...
  },
  //...

The url address is recommended to use a local address, relative to the application root directory. Set to "none" to turn off the function of jumping to the error page. At this time, the page displays the default error page content of Webview.

Listen for events in the error page

When customizing the 404 error page, you may need to get the error cause in the error.html page. You can listen to the "error" event to get the complete error information through the following methods. The example is as follows:

// get error message
document.addEventListener("error", function(e){
	var url = e.url;  // 错误页面的url地址
},false);

Dynamically set custom error pages at runtime

If you need to customize the error page of a Webview window separately, you need to pass the WebviewStyle object when creating The errorPage property controls:

var webview = plus.webview.create("url", "id", styles);   
webview.show();

Note: Only 5+App/Wap2App project support

common problem

• When the Android platform uses iframe, if the page cannot be loaded, there are differences on different versions of the system:
  • Android5.0 and above: The Webview window object will not load the error page, only the iframe node shows that the page cannot be loaded;
  • Below 5.0: The Webview window object loads the error page.