|
|
@@ -55,7 +55,7 @@ class MyWeb extends Component {
|
|
55
|
55
|
|
|
56
|
56
|
### Loading local HTML files
|
|
57
|
57
|
|
|
58
|
|
-Note: This is currently not working as discussed in [#428](https://github.com/react-native-community/react-native-webview/issues/428) and [#518](https://github.com/react-native-community/react-native-webview/issues/518). Possible workarounds include bundling all assets with webpack or similar, or running a [local webserver](https://github.com/futurepress/react-native-static-server).
|
|
|
58
|
+Note: This is currently not working as discussed in [#428](https://github.com/react-native-webview/react-native-webview/issues/428) and [#518](https://github.com/react-native-webview/react-native-webview/issues/518). Possible workarounds include bundling all assets with webpack or similar, or running a [local webserver](https://github.com/futurepress/react-native-static-server).
|
|
59
|
59
|
|
|
60
|
60
|
<details><summary>Show non-working method</summary>
|
|
61
|
61
|
|
|
|
@@ -302,8 +302,7 @@ export default class App extends Component {
|
|
302
|
302
|
<View style={{ flex: 1 }}>
|
|
303
|
303
|
<WebView
|
|
304
|
304
|
source={{
|
|
305
|
|
- uri:
|
|
306
|
|
- 'https://github.com/react-native-community/react-native-webview',
|
|
|
305
|
+ uri: 'https://github.com/react-native-webview/react-native-webview',
|
|
307
|
306
|
}}
|
|
308
|
307
|
onMessage={(event) => {}}
|
|
309
|
308
|
injectedJavaScript={runFirst}
|
|
|
@@ -322,7 +321,7 @@ By setting `injectedJavaScriptForMainFrameOnly: false`, the JavaScript injection
|
|
322
|
321
|
|
|
323
|
322
|
_Under the hood_
|
|
324
|
323
|
|
|
325
|
|
-> On iOS, ~~`injectedJavaScript` runs a method on WebView called `evaluateJavaScript:completionHandler:`~~ – this is no longer true as of version `8.2.0`. Instead, we use a `WKUserScript` with injection time `WKUserScriptInjectionTimeAtDocumentEnd`. As a consequence, `injectedJavaScript` no longer returns an evaluation value nor logs a warning to the console. In the unlikely event that your app depended upon this behaviour, please see migration steps [here](https://github.com/react-native-community/react-native-webview/pull/1119#issuecomment-574919464) to retain equivalent behaviour.
|
|
|
324
|
+> On iOS, ~~`injectedJavaScript` runs a method on WebView called `evaluateJavaScript:completionHandler:`~~ – this is no longer true as of version `8.2.0`. Instead, we use a `WKUserScript` with injection time `WKUserScriptInjectionTimeAtDocumentEnd`. As a consequence, `injectedJavaScript` no longer returns an evaluation value nor logs a warning to the console. In the unlikely event that your app depended upon this behaviour, please see migration steps [here](https://github.com/react-native-webview/react-native-webview/pull/1119#issuecomment-574919464) to retain equivalent behaviour.
|
|
326
|
325
|
> On Android, `injectedJavaScript` runs a method on the Android WebView called `evaluateJavascriptWithFallback`
|
|
327
|
326
|
|
|
328
|
327
|
#### The `injectedJavaScriptBeforeContentLoaded` prop
|
|
|
@@ -344,8 +343,7 @@ export default class App extends Component {
|
|
344
|
343
|
<View style={{ flex: 1 }}>
|
|
345
|
344
|
<WebView
|
|
346
|
345
|
source={{
|
|
347
|
|
- uri:
|
|
348
|
|
- 'https://github.com/react-native-community/react-native-webview',
|
|
|
346
|
+ uri: 'https://github.com/react-native-webview/react-native-webview',
|
|
349
|
347
|
}}
|
|
350
|
348
|
injectedJavaScriptBeforeContentLoaded={runFirst}
|
|
351
|
349
|
/>
|
|
|
@@ -357,9 +355,9 @@ export default class App extends Component {
|
|
357
|
355
|
|
|
358
|
356
|
This runs the JavaScript in the `runFirst` string before the page is loaded. In this case, the value of `window.isNativeApp` will be set to true before the web code executes.
|
|
359
|
357
|
|
|
360
|
|
-By setting `injectedJavaScriptBeforeContentLoadedForMainFrameOnly: false`, the JavaScript injection will occur on all frames (not just the top frame) if supported for the given platform. However, although support for `injectedJavaScriptBeforeContentLoadedForMainFrameOnly: false` has been implemented for iOS and macOS, [it is not clear](https://github.com/react-native-community/react-native-webview/pull/1119#issuecomment-600275750) that it is actually possible to inject JS into iframes at this point in the page lifecycle, and so relying on the expected behaviour of this prop when set to `false` is not recommended.
|
|
|
358
|
+By setting `injectedJavaScriptBeforeContentLoadedForMainFrameOnly: false`, the JavaScript injection will occur on all frames (not just the top frame) if supported for the given platform. However, although support for `injectedJavaScriptBeforeContentLoadedForMainFrameOnly: false` has been implemented for iOS and macOS, [it is not clear](https://github.com/react-native-webview/react-native-webview/pull/1119#issuecomment-600275750) that it is actually possible to inject JS into iframes at this point in the page lifecycle, and so relying on the expected behaviour of this prop when set to `false` is not recommended.
|
|
361
|
359
|
|
|
362
|
|
-> On iOS, ~~`injectedJavaScriptBeforeContentLoaded` runs a method on WebView called `evaluateJavaScript:completionHandler:`~~ – this is no longer true as of version `8.2.0`. Instead, we use a `WKUserScript` with injection time `WKUserScriptInjectionTimeAtDocumentStart`. As a consequence, `injectedJavaScriptBeforeContentLoaded` no longer returns an evaluation value nor logs a warning to the console. In the unlikely event that your app depended upon this behaviour, please see migration steps [here](https://github.com/react-native-community/react-native-webview/pull/1119#issuecomment-574919464) to retain equivalent behaviour.
|
|
|
360
|
+> On iOS, ~~`injectedJavaScriptBeforeContentLoaded` runs a method on WebView called `evaluateJavaScript:completionHandler:`~~ – this is no longer true as of version `8.2.0`. Instead, we use a `WKUserScript` with injection time `WKUserScriptInjectionTimeAtDocumentStart`. As a consequence, `injectedJavaScriptBeforeContentLoaded` no longer returns an evaluation value nor logs a warning to the console. In the unlikely event that your app depended upon this behaviour, please see migration steps [here](https://github.com/react-native-webview/react-native-webview/pull/1119#issuecomment-574919464) to retain equivalent behaviour.
|
|
363
|
361
|
> On Android, `injectedJavaScript` runs a method on the Android WebView called `evaluateJavascriptWithFallback`
|
|
364
|
362
|
> Note on Android Compatibility: For applications targeting `Build.VERSION_CODES.N` or later, JavaScript state from an empty WebView is no longer persisted across navigations like `loadUrl(java.lang.String)`. For example, global variables and functions defined before calling `loadUrl(java.lang.String)` will not exist in the loaded page. Applications should use the Android Native API `addJavascriptInterface(Object, String)` instead to persist JavaScript objects across navigations.
|
|
365
|
363
|
|
|
|
@@ -388,8 +386,7 @@ export default class App extends Component {
|
|
388
|
386
|
<WebView
|
|
389
|
387
|
ref={(r) => (this.webref = r)}
|
|
390
|
388
|
source={{
|
|
391
|
|
- uri:
|
|
392
|
|
- 'https://github.com/react-native-community/react-native-webview',
|
|
|
389
|
+ uri: 'https://github.com/react-native-webview/react-native-webview',
|
|
393
|
390
|
}}
|
|
394
|
391
|
/>
|
|
395
|
392
|
</View>
|
Joshua Smith
4 yıl önce