• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Web开发常见问题
2
3## Web组件的onUrlLoadIntercept返回结果是否影响onInterceptRequest
4
5适用于：Openharmony 3.2 Beta5 API 9
6
7**解决措施**
8
9Web组件的onUrlLoadIntercept的不同返回结果对应不同的操作：
10
11-   onUrlLoadIntercept返回true则直接拦截URL请求。
12-   onUrlLoadIntercept返回false走onInterceptRequest回调。
13
14**参考链接**
15
16[onUrlloadIntercept](../reference/arkui-ts/ts-basic-components-web.md#onurlloadintercept)
17
18## 为什么Web组件的onKeyEvent键盘事件不生效
19
20适用于：Openharmony 3.2 Beta5 API 9
21
22**问题现象**
23
24Web组件设置onKeyEvent监听键盘事件，键盘按下或抬起该事件不触发。
25
26**解决措施**
27
28onKeyEvent为通用事件，当前Web组件不支持通用事件。Web组件监听键盘事件可以使用onInterceptKeyEvent回调函数。
29
30**参考链接**
31
32[onInterceptKeyEvent](../reference/arkui-ts/ts-basic-components-web.md#oninterceptkeyevent9)
33
34## onInterceptRequest拦截URL并自定义HTML文件，页面加载失败
35
36适用于：Openharmony 3.2 Beta5 API 9
37
38**问题现象**
39
40onInterceptRequest拦截页面Web的src的链接后返回自定义HTML，但是自定义HTML文件里面的script标签里的内容没有加载。
41
42**解决措施**
43
44设置拦截器时，如果只设置setResponseData，内核将无法识别到这是个HTML文件，需要同时设置setResponseEncoding、setResponseMimeType、setResponseHeader等参数。
45
46**代码示例**
47
48```
49Web({ src: 'www.example.com', controller: this.controller })
50  .onInterceptRequest((event) => {
51    console.log('url:' + event.request.getRequestUrl())
52    this.responseweb = new WebResourceResponse();
53    var head1:Header = {
54      headerKey:"Connection",
55      headerValue:"keep-alive"
56    }
57    var length = this.heads.push(head1)
58    this.responseweb.setResponseHeader(this.heads)
59    this.responseweb.setResponseData(this.webdata)
60    this.responseweb.setResponseEncoding('utf-8')
61    this.responseweb.setResponseMimeType('text/html')
62    this.responseweb.setResponseCode(200)
63    this.responseweb.setReasonMessage('OK')
64    return this.responseweb
65})
66```
67
68**参考链接**
69
70[WebResourceResponse](../reference/arkui-ts/ts-basic-components-web.md#webresourceresponse)
71
72## 如何在ArkTS代码中执行HTML内的JS函数
73
74适用于：Openharmony 3.2 Beta5 API 9
75
76**解决措施**
77
78通过WebviewController中runJavaScript方法异步执行JavaScript脚本，并通过回调方式获取执行结果。
79
80>**说明：**
81>runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。
82
83**参考链接**
84
85[runJavaScript](../reference/apis/js-apis-webview.md#runjavascript)
86
87## 使用Web组件加载本地网页时，如何在本地网页中调用ArkTS中的函数
88
89适用于：Openharmony 3.2 Beta5 API 9
90
91**解决措施**
92
931.  准备一个html文件，例如：
94
95    ```
96    <!DOCTYPE html>
97    <html lang="en">
98    <head>
99        <meta charset="UTF-8">
100        <meta http-equiv="X-UA-Compatible" content="IE=edge">
101        <meta name="viewport" content="width=device-width, initial-scale=1.0">
102        <title>Document</title>
103    </head>
104    <body>
105        <h1>标题</h1>
106        <h5 id="h5"></h5>
107        <h5 id = "h6"></h5>
108        <button onclick="handleFromH5">调用Arkts的方法</button>
109        <script type="text/javascript">
110            function handleFromH5(){
111                let result = window.objName.test();
112                document.getElementById('h6').innerHTML = result;
113            }
114        </script>
115    </body>
116    </html>
117    ```
118
1192.  在ArkTs中使用JavaScriptProxy方法将ArkTs里的对象注册到H5的window对象中，然后在h5中使用window对象调用该方法。比如下面例子，在ArkTs中将testObj这个对象以别名objName注册到h5的window对象上，在上面的h5中就可以使用window.objName去访问这个对象。
120
121    ```
122    // xxx.ets
123    import web_webview from '@ohos.web.webview'
124    @Entry
125    @Component
126    struct Index {
127      @State message: string = 'Hello World'
128      controller: web_webview.WebviewController = new web_webview.WebviewController()
129      testObj = {
130        test: (data1, data2, data3) => {
131          console.log("data1:" + data1);
132          console.log("data2:" + data2);
133          console.log("data3:" + data3);
134          return "AceString";
135        },
136        toString: () => {
137          console.log('toString' + "interface instead.");
138        }
139      }
140      build() {
141        Row() {
142          Column() {
143            Web({ src:$rawfile('index.html'), controller:this.controller })
144              .javaScriptAccess(true)
145              .javaScriptProxy({
146                object: this.testObj,
147                name: "objName",
148                methodList: ["test", "toString"],
149                controller: this.controller,
150             })
151          }
152          .width('100%')
153        }
154        .height('100%')
155      }
156    }
157    ```
158
159
160**参考链接**
161
162[javaScriptProxy](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy)
163
164## Web组件domStorageAccess属性设置
165
166适用于：OpenHarmony 3.2 Beta5 API 9
167
168**解决措施**
169
170设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启，控制web网页中localStorage的使用，对sessionStorage未做控制
171
172**参考链接**
173
174[domStorageAccess](../reference/arkui-ts/ts-basic-components-web.md#domstorageaccess)
175