HarmonyOS Web本地资源跨域加载异常

使用跨域方案加载一个跳转网页，第一次加载显示白屏，返回后再次进入显示正常；再次退出重进网页，又显示白屏，需要退出重进才会显示正常。一直这样循环。网页加载代码如下：

Web({ src: this.url, controller: this.webviewController })
  .domStorageAccess(true)
  .onlineImageAccess(true)
  .imageAccess(true)
  .zoomAccess(false)
  .fileAccess(true)
  .geolocationAccess(true)
    //.userAgent("tdxhms")
  .userAgent('Mozilla/5.0 (Phone; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile '+"tdxhms")
  .javaScriptAccess(true)
  .javaScriptProxy(this.systemExposedJsApi!.getJavaScriptProxy())
  .height(this.pageHeight)
  .mixedMode(MixedMode.All)
  .backgroundColor('rgba(0,0,0,0)')
  .onInterceptRequest((event):WebResourceResponse|null=>{
    console.log('----webview onInterceptRequest' );
    if(!event){
      return null;
    }
    return onInterceptRequest(event.request);
  })
  .onPageBegin(()=>{
    console.log('----webview onPageBegin' );
  })
  .onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => {
    console.log('----webview onOverrideUrlLoading' );
    return false;
  })
  .onRenderExited((event) => {
    if (event) {
      console.log('----webview onRenderExited:' + event.renderExitReason);
    }
  })
  .onProgressChange((event) => {
    if (event) {
      console.log('----webview newProgress:' + event.newProgress);
    }
  })
  .onPageVisible((event) => {
    console.log('----webview onPageVisible url:' + event.url);
  })
  .onLoadIntercept((event) => {
    console.log('----webview onLoadIntercept ');
    return false;
  })
  .onPageEnd((event) => {
    this.isShow = true;
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

HarmonyOS

fox280

2025-01-09 17:38:58

浏览

回答 1

按赞同

按时间

shlp

使用这个参考示例：

import web_webview from '@ohos.web.webview';
import uri from '@ohos.uri'

@Entry
@Component
struct webViewDemo {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  responseweb: WebResourceResponse = new WebResourceResponse()

  aboutToAppear() {
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {

      Web({ src: 'http://www.exampletest.com/index.html', controller: this.webviewController })
        .onProgressChange((e => {
          console.log('preivew onProgressChange', JSON.stringify(e))
        }))
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .verticalScrollBarAccess(true)
        .onInterceptRequest((event) => {
          if (event) {
            console.log('url:' + event.request.getRequestUrl())
            const url = event.request.getRequestUrl();
            const urlInfo = new uri.URI(url);
            if (urlInfo.host === 'www.exampletest.com') {
              console.log(urlInfo.path)
              if (urlInfo.path === '/index.html') {
                this.responseweb.setResponseData($rawfile('asset/index.html'))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('text/html')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else if (url.endsWith('css')) {
                this.responseweb.setResponseData($rawfile('asset' + urlInfo.path))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('text/css')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else if (url.endsWith('js')) {
                this.responseweb.setResponseData($rawfile('asset' + urlInfo.path))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('text/javascript')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else if (url.endsWith('png') || url.endsWith('jpg')) {
                this.responseweb.setResponseData($rawfile('asset' + urlInfo.path))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('image/png')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else {
                return null;
              }
            } else {
              return null;
            }
          } else {
            return null;
          }

        })
        .onErrorReceive((event) => {
          if (event) {
            console.log('reader onErrorReceive', event.error.getErrorCode(), event.error.getErrorInfo())
          }
        })
        .onHttpErrorReceive((event) => {
          console.log('reader onHttpErrorReceive', JSON.stringify(event?.response.getReasonMessage()))
        })
        .fileAccess(true)
        .zoomAccess(true)
        .domStorageAccess(true)
        .height('100%')
        .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.

html代码：

<!DOCTYPE html>
  <html>
  <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width,initial-scale=1,user-scalable=yes" name="viewport">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no,address=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="./static/css/index.css">
  </head>
  <script src="./static/js/index.js"></script>

  <body>
  <div>
  hellow world
  </div>
  <div>
  <img src="./static/img/test.png" alt="">
  </div>
  </body>
  <script language="javascript">
console.log(4321)
  </script>
  </html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

2025-01-09 19:41:32

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web本地资源跨域加载异常

订阅鸿蒙技术特刊，精选内容抢先看