forked from react-native-webview/react-native-webview
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Windows): Add support for custom headers, POST requests and `onO…
…penWindow` to Windows * Add WindowsWebViewCommands and implement releaseFocus * Fixes to setup request methos, added helpers class to visual studio project and fixed missing FocusManager namespace * Add LinkHandlingEnabled property to allow application to handle request by the webview to open new windows * Refactor cookie handling in ReactWebView2.cpp * Fix WebView source handling and add new commands * Add linkHandlingEnabled property to nativeProps * Add postMessage and loadUrl commands to command list * Add loadUrl function to WebViewComponent * Refactor string manipulation functions in ReactWebViewHelpers * Refactor cookie handling in ReactWebView2.cpp * Update RNCWebViewUIManagerWindows type in WebViewTypes.ts * Fix WebView messaging functionality * Add useWebView2 prop to WebView component * Update test to include alert support in WebView2 * Create Windows specific example components for testing webview scenarios * Update documentation --------- Co-authored-by: Kennedy Mumo <kemumo@microsoft.com>
- Loading branch information
Showing
21 changed files
with
902 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import React, {Component} from 'react'; | ||
| import {Text, View} from 'react-native'; | ||
|
|
||
| import WebView from 'react-native-webview'; | ||
|
|
||
| const HTML = ` | ||
| <!DOCTYPE html>\n | ||
| <html> | ||
| <head> | ||
| <title>Alerts</title> | ||
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | ||
| <meta name="viewport" content="width=320, user-scalable=no"> | ||
| <style type="text/css"> | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font: 62.5% arial, sans-serif; | ||
| background: #ccc; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <button onclick="showAlert()">Show alert</button> | ||
| <button onclick="showConfirm()">Show confirm</button> | ||
| <button onclick="showPrompt()">Show prompt</button> | ||
| <p id="demo"></p> | ||
| <script> | ||
| function showAlert() { | ||
| alert("Hello! I am an alert box!"); | ||
| document.getElementById("demo").innerHTML = "Alert dismissed!"; | ||
| } | ||
| function showConfirm() { | ||
| var response; | ||
| if (confirm("Press a button!")) { | ||
| response = "You pressed OK on confirm!"; | ||
| } else { | ||
| response = "You pressed Cancel on confirm!"; | ||
| } | ||
| document.getElementById("demo").innerHTML = response; | ||
| } | ||
| function showPrompt() { | ||
| var message; | ||
| const name = prompt("Please enter your name", "Name"); | ||
| if (name !== null) { | ||
| message = "Hello " + name; | ||
| } else { | ||
| message = "You pressed Cancel on prompt!"; | ||
| } | ||
| document.getElementById("demo").innerHTML = message; | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
| `; | ||
|
|
||
| type Props = {}; | ||
| type State = {}; | ||
|
|
||
| export default class Alerts extends Component<Props, State> { | ||
| state = {}; | ||
|
|
||
| render() { | ||
| return ( | ||
| <View style={{ height: 120 }}> | ||
| <WebView | ||
| source={{html: HTML}} | ||
| automaticallyAdjustContentInsets={false} | ||
| useWebView2 | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, {Component} from 'react'; | ||
| import {View, Alert, TextInput} from 'react-native'; | ||
|
|
||
| import WebView from 'react-native-webview'; | ||
|
|
||
| const HTML = `<!DOCTYPE html>\n | ||
| <html> | ||
| <head> | ||
| <title>Messaging</title> | ||
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | ||
| <meta name="viewport" content="width=320, user-scalable=no"> | ||
| <style type="text/css"> | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font: 62.5% arial, sans-serif; | ||
| background: #ccc; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <button onclick="sendPostMessage()">Send post message from JS to WebView</button> | ||
| <p id="demo"></p> | ||
| <p id="test">Nothing received yet</p> | ||
| <script> | ||
| function sendPostMessage() { | ||
| window.postMessage('Message from JS'); | ||
| } | ||
| window.addEventListener('message',function(event){ | ||
| document.getElementById('test').innerHTML = event.data; | ||
| console.log("Message received from RN: ",event.data); | ||
| },false); | ||
| document.addEventListener('message',function(event){ | ||
| document.getElementById('test').innerHTML = event.data; | ||
| console.log("Message received from RN: ",event.data); | ||
| },false); | ||
| </script> | ||
| </body> | ||
| </html>`; | ||
|
|
||
| type Props = {}; | ||
| type State = {}; | ||
|
|
||
| export default class Messaging extends Component<Props, State> { | ||
| state = {}; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.webView = React.createRef(); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <View style={{height: 120}}> | ||
| <TextInput onSubmitEditing={(e) => { | ||
| this.webView.current.postMessage(e.nativeEvent.text); | ||
| }}/> | ||
| <WebView | ||
| ref={this.webView} | ||
| source={{html: HTML}} | ||
| onLoadEnd={()=>{this.webView.current.postMessage('Hello from RN');}} | ||
| automaticallyAdjustContentInsets={false} | ||
| onMessage={(e: {nativeEvent: {data?: string}}) => { | ||
| Alert.alert('Message received from JS: ', e.nativeEvent.data); | ||
| }} | ||
| useWebView2 | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import React, {Component} from 'react'; | ||
| import {Button, Switch, StyleSheet, Text, View} from 'react-native'; | ||
|
|
||
| import WebView from 'react-native-webview'; | ||
|
|
||
| const HTML = ` | ||
| <!DOCTYPE html>\n | ||
| <html> | ||
| <head> | ||
| <title>OnOpenWindow</title> | ||
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | ||
| <meta name="viewport" content="width=320, user-scalable=no"> | ||
| <style type="text/css"> | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font: 62.5% arial, sans-serif; | ||
| background: #ccc; | ||
| } | ||
| a { | ||
| display: block; | ||
| margin-top: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <button onclick="openWindowWithoutParam()">Call window.open() from JS</button> | ||
| <button onclick="openWindowBlank()">Call window.open('_blank') from JS</button> | ||
| <button onclick="openWindowSelf()">Call window.open('_self') from JS</button> | ||
| <button onclick="openWindowParent()">Call window.open('_parent') from JS</button> | ||
| <button onclick="openWindowTop()">Call window.open('_top') from JS</button> | ||
| <a href="https://example.com" target="_blank">Call target=_blank link from DOM</a> | ||
| <script> | ||
| function openWindowWithoutParam() { | ||
| window.open('https://example.com') | ||
| } | ||
| function openWindowBlank() { | ||
| window.open('https://example.com', '_blank') | ||
| } | ||
| function openWindowSelf() { | ||
| window.open('https://example.com', '_self') | ||
| } | ||
| function openWindowParent() { | ||
| window.open('https://example.com', '_parent') | ||
| } | ||
| function openWindowTop() { | ||
| window.open('https://example.com', '_top') | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
| `; | ||
|
|
||
| type Props = {}; | ||
| type State = { | ||
| shouldInterceptOpenWindow: boolean, | ||
| text: string, | ||
| webViewKey: number | ||
| }; | ||
|
|
||
| export default class OpenWindow extends Component<Props, State> { | ||
| state = { | ||
| shouldInterceptOpenWindow: true, | ||
| text: 'No OpenWindow event intercepted yet', | ||
| webViewKey: 1 | ||
| }; | ||
|
|
||
| interceptOpenWindow = (syntheticEvent) => { | ||
| const { nativeEvent } = syntheticEvent | ||
| const { targetUrl } = nativeEvent | ||
| this.setState({ | ||
| text: `Intercepted OpenWindow event for ${targetUrl} at ${Date.now()}` | ||
| }) | ||
| }; | ||
|
|
||
| toggleShouldInterceptOpenWindow = () => { | ||
| this.setState(prevState => ({ | ||
| shouldInterceptOpenWindow: !prevState.shouldInterceptOpenWindow | ||
| })) | ||
| }; | ||
|
|
||
| resetWebView = () => { | ||
| this.setState(prevState => ({ | ||
| webViewKey: prevState.webViewKey + 1 | ||
| })) | ||
| }; | ||
|
|
||
| render() { | ||
| const onOpenWindow = this.state.shouldInterceptOpenWindow | ||
| ? this.interceptOpenWindow | ||
| : undefined | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| <View style={styles.interceptSection}> | ||
| <Text style={styles.text}> | ||
| Intercept OpenWindow event | ||
| </Text> | ||
| <Switch | ||
| onValueChange={this.toggleShouldInterceptOpenWindow} | ||
| value={this.state.shouldInterceptOpenWindow} | ||
| /> | ||
| </View> | ||
| <WebView | ||
| key={this.state.webViewKey} | ||
| source={{html: HTML}} | ||
| automaticallyAdjustContentInsets={false} | ||
| useWebView2 | ||
| onOpenWindow={onOpenWindow} | ||
| /> | ||
| <Text style={styles.text}> | ||
| {this.state.text} | ||
| </Text> | ||
| <Button title="Reset webview" onPress={this.resetWebView} /> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| height: 300 | ||
| }, | ||
| interceptSection: { | ||
| alignItems: 'center', | ||
| flexDirection: "row", | ||
| justifyContent: 'space-between', | ||
| marginBottom: 20 | ||
| }, | ||
| text: { | ||
| color: 'black' | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.