Skip to content

Commit 9a74d38

Browse files
rigor789rigor789
committed
docs: cleanup WebView
1 parent 1893b95 commit 9a74d38

File tree

4 files changed

+62
-137
lines changed

4 files changed

+62
-137
lines changed

‎content/screenshots/android/WebView.png

201 KB
Loading

‎content/screenshots/ios/WebView.png

258 KB
Loading

‎content/ui/web-view.md

Lines changed: 48 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,238 +1,149 @@
11
---
22
title: WebView
3+
description: UI component for rendering web content.
4+
contributors:
5+
- rigor789
6+
- Ombuweb
37
---
48

5-
`<WebView>` is a UI component that lets you show web content in your app. You can pull and show content from a URL or a local HTML file, or you can render static HTML content.
9+
`<WebView>` is a UI component for rendering web content. The content can be from a remote URL, a local file, or an inline string.
610

711
See also: [HtmlView](/ui/html-view).
812

9-
---
10-
1113
<DeviceFrame type="ios">
12-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/WebView.png"/>
14+
<img src="../screenshots/ios/WebView.png"/>
1315
</DeviceFrame>
1416
<DeviceFrame type="android">
15-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/WebView.png" />
17+
<img src="../screenshots/android/WebView.png"/>
1618
</DeviceFrame>
1719

18-
<!-- /// flavor plain -->
19-
20-
```xml
21-
<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="{{ webViewSrc }}" />
22-
```
23-
24-
<!-- ///
25-
26-
/// flavor angular
27-
28-
```xml
29-
<WebView
30-
[src]="webViewSrc"
31-
(loadStarted)="onLoadStarted($event)"
32-
(loadFinished)="onLoadFinished($event)"
33-
>
34-
</WebView>
35-
```
36-
37-
///
38-
39-
/// flavor vue
40-
41-
```xml
42-
<WebView src="http://nativescript-vue.org/" />
43-
44-
<WebView src="~/html/index.html" />
45-
46-
<WebView src="<div><h1>Some static HTML</h1></div>" />
47-
```
48-
49-
///
50-
51-
/// flavor svelte
20+
<<< @/../examples/src/ui/WebView/template.xml#example
5221

53-
```xml
54-
<webView src="http://nativescript.org/" />
55-
56-
<webView src="~/html/index.html" />
57-
58-
<webView src="<div><h1>Some static HTML</h1></div>" />
59-
```
60-
61-
///
62-
63-
/// flavor react
64-
65-
```tsx
66-
<webView src="http://nativescript.org/" />
67-
68-
<webView src="~/html/index.html" />
69-
70-
<webView src="<div><h1>Some static HTML</h1></div>" />
71-
```
72-
73-
/// -->
74-
75-
::: tip Tip
76-
To be able to use gestures in WebView component on Android, we should first disabled the zoom control. To do that we could access the android property and with the help of setDisplayZoomControls to set this control to false.
22+
::: info Tip
23+
To be able to use gestures inside a WebView on Android, [disable zoom controls](#disableZoom).
7724
:::
7825

7926
## Props
8027

8128
### src
8229

83-
```xml
84-
<WebView src="http://nativescript-vue.org/" />
30+
```ts
31+
src: string
32+
```
8533

86-
<WebView src="~/html/index.html" />
34+
The source to load in the WebView. The value can be a valid HTTP URL, a path to a local HTML file, or a HTML string.
8735

88-
<WebView src="<div><h1>Some static HTML</h1></div>" />
89-
```
36+
**Example:**
9037

9138
```ts
92-
webView.src = 'http://nativescript-vue.org/'
93-
//or
94-
webView.src = '~/html/index.html'
95-
//or
39+
webView.src = 'https://nativescript.org/'
40+
webView.src = '~/assets/html/index.html'
9641
webView.src = '<div><h1>Some static HTML</h1></div>'
9742
```
9843

99-
Gets or sets the web content to be displayed. Valid values:
100-
101-
- an absolute URL,
102-
- the path to a local HTML file,
103-
- or static HTML.
104-
105-
---
44+
::: warning Insecure URLs
45+
Depending on the software version of the device, insecure URLs may be blocked (`http://`), it's recommended to always use secure URLs (`https://`).
46+
:::
10647

10748
### canGoBack
10849

10950
```ts
110-
canGoBack: boolean = webView.canGoBack
51+
canGoBack: boolean
11152
```
11253

11354
Gets a value indicating whether the WebView can navigate back.
11455

115-
---
116-
11756
### canGoForward
11857

11958
```ts
120-
canGoForward: boolean = webView.canGoForward
59+
canGoForward: boolean
12160
```
12261

12362
Gets a value indicating whether the WebView can navigate forward.
12463

125-
---
126-
127-
### disableZoom
64+
### disableZoom {#disableZoom}
12865

12966
```ts
130-
webView.disableZoom = true
67+
disableZoom: boolean
13168
```
13269

133-
Disable scrolling in the WebView.
134-
135-
---
70+
Disable zooming in the WebView.
13671

13772
### iosAllowInlineMediaPlayback
13873

139-
```xml
140-
<WebView src="https://docs.nativescript.org/" iosAllowInlineMediaPlayback="true"/>
141-
```
142-
14374
```ts
144-
webView.iosAllowInlineMediaPlayback = true
75+
iosAllowInlineMediaPlayback: boolean
14576
```
14677

147-
(`iOS only`) Enables inline media playback on iOS. By default, WebView forces iPhone into fullscreen media playback.
78+
Enables inline media playback on iOS. By default, WebView forces iPhone into fullscreen media playback. **iOS only.**
14879

149-
---
80+
### ...Inherited
81+
82+
For additional inherited properties not shown, refer to the [API Reference](/api/class/WebView)
15083

15184
## Methods
15285

15386
### stopLoading()
15487

15588
```ts
156-
webView.stopLoading()
89+
stopLoading(): void
15790
```
15891

15992
Stops loading the current content (if any).
16093

161-
---
162-
16394
### goBack()
16495

16596
```ts
166-
webView.goBack()
97+
goBack(): void
16798
```
16899

169-
Navigates back.
170-
171-
---
100+
Navigates the WebView back.
172101

173102
### goForward()
174103

175104
```ts
176-
webView.goForward()
105+
goForward(): void
177106
```
178107

179-
Navigates forward.
180-
181-
---
108+
Navigates the WebView forward.
182109

183110
### reload()
184111

185112
```ts
186-
webView.reload()
113+
reload(): void
187114
```
188115

189116
Reloads the current url.
190117

191-
---
192-
193-
### ...Inherited
194-
195-
For additional inherited properties not shown, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/webview)
196-
197118
## Events
198119

199120
### loadStarted
200121

201-
```xml
202-
<WebView src="https://docs.nativescript.org/" loadStarted="onLoadStarted"/>
203-
```
204-
205122
```ts
206-
export function onLoadStarted(args) {
207-
const webView = args.object as WebView
123+
on('loadStarted', (args: EventData) => {
124+
const webView = arg.object as WebView
208125

209-
console.log('Can go back? ', Object.keys(args))
210-
console.log('Can go forward? ', webView.canGoForward)
211-
}
126+
console.log('WebView started loading', args.url)
127+
})
212128
```
213129

214-
Emitted when the page has started loading in the `<WebView>`. The event data is of [LoadEventData](https://docs.nativescript.org/api-reference/interfaces/loadeventdata) type.
130+
Emitted when the page has started loading in the `<WebView>`.
215131

216-
---
132+
See [LoadEventData](/api/interface/LoadEventData).
217133

218134
### loadFinished
219135

220-
```xml
221-
<WebView src="https://docs.nativescript.org/" loadFinished="onLoadFinished"/>
222-
```
223-
224136
```ts
225-
export function onLoadFinished(args) {
226-
const webView = args.object as WebView
137+
on('loadFinished', (args: EventData) => {
138+
const webView = arg.object as WebView
227139

228-
console.log('Can go back? ', Object.keys(args))
229-
console.log('Can go forward? ', webView.canGoForward)
230-
}
140+
console.log('WebView finished loading', args.url)
141+
})
231142
```
232143

233-
Emitted when the page has finished loading in the `<WebView>`. The event data is of [LoadEventData](https://docs.nativescript.org/api-reference/interfaces/loadeventdata) type.
144+
Emitted when the page has started loading in the `<WebView>`.
234145

235-
---
146+
See [LoadEventData](/api/interface/LoadEventData).
236147

237148
## Native component
238149

‎examples/src/ui/WebView/template.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page>
2+
<GridLayout>
3+
<!-- keeps the screen busy for Maestro to wait for the WebView... -->
4+
<ActivityIndicator busy="true" />
5+
<WebView src="https://nativescript.org/" backgroundColor="transparent" />
6+
7+
<!-- actual example - not rendered because the above WebView is used for the screenshot instead. -->
8+
<ContentView visibility="collapse">
9+
<!-- #region example -->
10+
<WebView src="https://nativescript.org/" />
11+
<!-- #endregion example -->
12+
</ContentView>
13+
</GridLayout>
14+
</Page>

0 commit comments

Comments
 (0)