• 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#onurlloadinterceptdeprecated)
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
176## 如何解决Web组件加载的HTML页面内检测网络状态失败
177
178适用于：OpenHarmony 3.2 Beta5 API 9
179
180**问题现象**
181
182在HTML页面内通过window.navigator.onLine获取网络状态，联网和断网情况下均为false。
183
184**解决措施**
185
186配置应用获取网络信息权限： ohos.permission.GET\_NETWORK\_INFO
187
188**参考链接**
189
190[GET\_NETWORK\_INFO](../security/permission-list.md#ohospermissionget_network_info)
191
192## 如何自定义拼接设置UserAgent参数
193
194适用于：OpenHarmony 3.2 Beta5 API 9
195
196**解决措施**
197
198默认UserAgent需要通过WebviewController获取。WebviewController对象必须在Web组件绑定后，才能调用WebviewController上的方法getUserAgent获取默认UserAgent。因此在页面加载前通过自定义字符串拼接修改UserAgent，可采用此方式：
199
2001.  使用@State定义初始UserAgent，绑定到Web组件；
2012.  在Web组件的onUrlLoadIntercept回调中，通过WebviewController.getUserAgent\(\)获取默认UserAgent，并修改Web组件绑定的UserAgent
202
203**代码示例**
204
205```
206import web_webview from '@ohos.web.webview'
207@Entry
208@Component
209struct Index {
210  private controller: web_webview.WebviewController = new web_webview.WebviewController()
211  @State userAgentPa: string = ''
212  build() {
213    Row() {
214      Column() {
215        Web({ src: 'http://www.example.com', controller: this.controller }) //需要手动替换为真实网站
216          .width('100%')
217          .userAgent(this.userAgentPa)
218          .onUrlLoadIntercept((event) => {
219            let userAgent = this.controller.getUserAgent();
220            this.userAgentPa = userAgent + ' 111111111'
221            return false;
222          })
223      }
224      .width('100%')
225    }
226    .height('100%')
227  }
228}
229```
230
231**参考链接**
232
233[userAgent](../reference/arkui-ts/ts-basic-components-web.md#useragentdeprecated)、[getUserAgent](../reference/apis/js-apis-webview.md#getuseragent)
234
235## Web组件中如何通过手势滑动返回上一个Web页面
236
237适用于：Openharmony 3.2 Beta5 API 9
238
239**解决措施**
240
241通过重写onBackPress函数来自定义返回逻辑，使用WebviewController判断是否返回上一个Web页面。
242
243**示例代码**
244
245```
246import web_webview from '@ohos.web.webview';
247@Entry
248@Component
249struct Index {
250  controller: web_webview.WebviewController = new web_webview.WebviewController();
251  build() {
252    Column() {
253      Web({ src: 'http://www.example.com', controller: this.controller })//需要手动替换为真实网站
254    }
255  }
256  onBackPress() {
257    // 当前页面是否可前进或者后退给定的step步(-1),正数代表前进，负数代表后退
258    if (this.controller.accessStep(-1)) {
259      this.controller.backward(); // 返回上一个web页
260      // 执行用户自定义返回逻辑
261      return true
262    } else {
263      // 执行系统默认返回逻辑，返回上一个page页
264      return false
265    }
266  }
267}
268```
269
270**参考链接**
271
272[accessStep](../reference/apis/js-apis-webview.md#accessstep)
273
274