• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1## 解决Web组件本地资源跨域问题
2
3### 介绍
4
51. 本示例主要介绍解决Web组件本地资源跨域问题，利用Web组件的onInterceptRequest方法，对本地资源进行拦截和相应的替换。
62. 本工程主要实现了对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-cross-origin.md 示例代码片段的工程化，主要目标是实现指南中示例代码需要与sample工程文件同源。
7
8#### LocCrossOriginResAccSol_one
9
10##### 介绍
11
121. 本示例主要介绍解决Web组件本地资源跨域问题，利用Web组件的onInterceptRequest方法，对本地资源进行拦截和相应的替换。
13
14##### 效果预览
15
16| 主页                                                         |
17| ------------------------------------------------------------ |
18| <img src="./screenshots/LocCrossOriginResAccSol_one.png" width="360;" /> |
19
20使用说明
21
221. 针对本地index.html,使用http或者https协议代替file协议或者resource协议，构造一个属于自己的域名。
23
24#### LocCrossOriginResAccSol_two
25
26##### 介绍
27
281. 本示例主要介绍解决Web组件本地资源跨域问题，通过setPathAllowingUniversalAccess设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。
29
30##### 效果预览
31
32| 主页                                                         | 跨域访问                                                     |
33| ------------------------------------------------------------ | ------------------------------------------------------------ |
34| <img src="screenshots\LocCrossOriginResAccSol_two_1.png" width="360;" /> | <img src="screenshots\LocCrossOriginResAccSol_two_2.png" width="360;" /> |
35
36使用说明
37
381. 通过setPathAllowingUniversalAccess设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。
391. index.html页面加载完成后，页面上显示一个按钮stealFile，点击stealFile按钮触发getFile函数跨域访问本地resfile/js/script.js文件。
40
41## 使用智能防跟踪功能
42
43### 介绍
44
451. 实现对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-intelligent-tracking-prevention.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。
46
47#### AddIntTrackPreventByPassList
48
49##### 介绍
50
511. 本示例主要介绍使用智能防跟踪功能，调用addIntelligentTrackingPreventionBypassingList接口设置需要绕过智能防跟踪功能的域名列表。
52
53##### 效果预览
54
55| 主页                                                         |
56| ------------------------------------------------------------ |
57| <img src="./screenshots/AddIntTrackPreventByPassList.png" width="360;" /> |
58
59使用说明
60
611. 点击addIntelligentTrackingPreventionBypassingList按钮设置需要绕过智能防跟踪功能的域名。
62
63#### ClearIntTrackPreventByPassList
64
65##### 介绍
66
671. 本示例主要介绍使用智能防跟踪功能，通过调用clearIntelligentTrackingPreventionBypassingList接口清除通过addIntelligentTrackingPreventionBypassingList接口设置的所有域名。
68
69##### 效果预览
70
71| 主页                                                         |
72| ------------------------------------------------------------ |
73| <img src="./screenshots/ClearIntTrackPreventByPassList.png" width="360;" /> |
74
75使用说明
76
771. 点击clearIntelligentTrackingPreventionBypassingList按钮清除通过addIntelligentTrackingPreventionBypassingList接口设置的所有域名。
78
79#### EnableIntTrackPrevent
80
81##### 介绍
82
831. 本示例主要介绍使用智能防跟踪功能，调用enableIntelligentTrackingPrevention接口使能或者关闭相应Web组件的智能防跟踪功能。
84
85##### 效果预览
86
87| 主页                                                         |
88| ------------------------------------------------------------ |
89| <img src="./screenshots/EnableIntTrackPrevent.png" width="360;" /> |
90
91使用说明
92
931. 点击enableIntelligentTrackingPrevention按钮使能相应Web组件的智能防跟踪功能。
94
95#### IsIntTrackPreventEnabled
96
97##### 介绍
98
991. 本示例主要介绍使用智能防跟踪功能，通过调用isIntelligentTrackingPreventionEnabled接口判断当前Web组件是否开启了智能防跟踪功能。
100
101##### 效果预览
102
103| 主页                                                         |
104| ------------------------------------------------------------ |
105| <img src="./screenshots/IsIntTrackPreventEnabled.png" width="360;" /> |
106
107使用说明
108
1091. 点击isIntelligentTrackingPreventionEnabled按钮判断当前Web组件是否开启了智能防跟踪功能。
110
111#### OnIntTrackPreventResult
112
113##### 介绍
114
1151. 本示例主要介绍使用智能防跟踪功能，通过调用onIntelligentTrackingPreventionResult接口，以回调的方式异步获取拦截的跟踪型网站的域名和访问的网站域名信息。
116
117##### 效果预览
118
119| 主页                                                         |
120| ------------------------------------------------------------ |
121| <img src="./screenshots/OnIntTrackPreventResult.png" width="360;" /> |
122
123使用说明
124
1251. 点击onIntelligentTrackingPreventionResult按钮，获取拦截的跟踪型网站的域名和访问的网站域名信息。
126
127#### RemoveIntTrackPreventByPassList
128
129##### 介绍
130
1311. 本示例主要介绍使用智能防跟踪功能，通过调用removeIntelligentTrackingPreventionBypassingList接口移除通过addIntelligentTrackingPreventionBypassingList接口设置的部分域名列表。
132
133##### 效果预览
134
135| 主页                                                         |
136| ------------------------------------------------------------ |
137| <img src="./screenshots/RemoveIntTrackPreventByPassList.png" width="360;" /> |
138
139使用说明
140
1411. 点击removeIntelligentTrackingPreventionBypassingList按钮，移除通过addIntelligentTrackingPreventionBypassingList接口设置的部分域名列表。
142
143## 使用Web组件的广告过滤功能
144
145### 介绍
146
1471. 实现对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-adsblock.md 示例代码片段的工程化，保证指南中示例代码与sample工程文件同源。
148
149#### EnablingAdsBlocking
150
151##### 介绍
152
1531. 本示例主要介绍使用Web组件的广告过滤功能，应用可以通过AdsBlockManager提供的setAdsBlockRules()接口设置自定义的easylist过滤规则，并通过Web组件的enableAdsBlock()接口使能广告过滤特性。
154
155##### 效果预览
156
157| 主页                                                         | 文件选择器                                                   |
158| ------------------------------------------------------------ | ------------------------------------------------------------ |
159| <img src="./screenshots/EnablingAdsBlocking_1.png" width="360;" />/> | <img src="./screenshots/EnablingAdsBlocking_2.png" width="360;" /> |
160
161使用说明
162
1631. 点击setAdsBlockRules按钮，通过文件选择器设置自定义的easylist过滤规则。
164
165#### DisAdsBlockSpecDomPages_one
166
167##### 介绍
168
1691. 本示例主要介绍使用Web组件的广告过滤功能，在Web组件的广告过滤开关开启后，应用有时候会期望关闭一些特定页面的广告过滤功能，AdsBlockManager提供了addAdsBlockDisallowedList()接口完成此功能。
170
171##### 效果预览
172
173| 主页                                                         |
174| ------------------------------------------------------------ |
175| <img src="./screenshots/DisAdsBlockSpecDomPages_one.png" width="360;" /> |
176
177使用说明
178
1791. 点击addAdsBlockDisallowedList按钮关闭特定域名页面的广告过滤。
180
181#### DisAdsBlockSpecDomPages_two
182
183##### 介绍
184
1851. 本示例主要介绍使用Web组件的广告过滤功能，使用addAdsBlockDisallowedList()接口添加域名。
186
187##### 效果预览
188
189| 主页                                                         |
190| ------------------------------------------------------------ |
191| <img src="./screenshots/DisAdsBlockSpecDomPages_two.png" width="360;" /> |
192
193使用说明
194
1951. 点击addAdsBlockDisallowedList按钮添加域名。
196
197#### CollectingAdsBlockingInformation
198
199##### 介绍
200
2011. 本示例主要介绍使用Web组件的广告过滤功能，在Web组件的广告过滤开关开启后，访问的网页如果发生了广告过滤，会通过Web组件的onAdsBlocked()回调接口通知到应用，应用可根据需要进行过滤信息的收集和统计。
202
203##### 效果预览
204
205| 主页                                                         |
206| ------------------------------------------------------------ |
207| <img src="./screenshots/CollectingAdsBlockingInformation.png" width="360;" /> |
208
209使用说明
210
2111. 使用onAdsBlocked接口收集广告过滤的信息。
212
213### 工程目录
214
215```
216entry/src/main/
217|---ets
218|---|---entryability
219|---|---|---EntryAbility.ets
220|---|---pages
221|---|---|---CollectingAdsBlockingInformation
222|---|---|---DisAdsBlockSpecDomPages_one
223|---|---|---DisAdsBlockSpecDomPages_two
224|---|---|---LocCrossOriginResAccSol_one
225|---|---|---LocCrossOriginResAccSol_two
226|---|---|---AddIntTrackPreventByPassList
227|---|---|---ClearIntTrackPreventByPassList
228|---|---|---EnableIntTrackPrevent
229|---|---|---IsIntTrackPreventEnabled
230|---|---|---OnIntTrackPreventResult
231|---|---|---RemoveIntTrackPreventByPassList
232|---|---|---EnablingAdsBlocking
233|---|---|---Index.ets						// 首页
234|---resources								// 静态资源
235|---ohosTest
236|---|---ets
237|---|---|---tests
238|---|---|---|---Ability.test.ets            // 自动化测试用例
239```
240
241
242### 相关权限
243
244[ohos.permission.INTERNET](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
245
246## 依赖
247
248不涉及。
249
250## 约束与限制
251
2521. 本示例仅支持标准系统上运行，支持设备：RK3568。
2532. 本示例支持API14版本SDK，SDK版本号(API Version 14 Release)。
2543. 本示例需要使用DevEco Studio 版本号(5.0.1Release)才可编译运行。
255
256## 下载
257
258如需单独下载本工程，执行如下命令：
259
260```
261git init
262git config core.sparsecheckout true
263echo code/DocsSample/ArkWeb/ManageWebCompSecPriv > .git/info/sparse-checkout
264git remote add origin https://gitee.com/openharmony/applications_app_samples.git
265git pull origin master
266```
267