We have list of download links with base64 encoded string in the href with download attribute which works well in the browser but in Webview it gives error.
Here is the webview code
<WebView style={styles.WebView}
useWebKit={true}
source={{ uri: url }}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
// originWhitelist={['*']}
originWhitelist={['http://*','https://*', 'git://*',"file://"]}
mixedContentMode="compatibility"
injectedJavaScript={INJECTEDJAVASCRIPT}
mediaPlaybackRequiresUserAction={false}
allowsInlineMediaPlayback={true}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
onNavigationStateChange={
(newNavState) => {
console.log('TEST');
}
}
// onShouldStartLoadWithRequest={this.onLoadStart}
/>
Here is the Error I get
How Can I intercept the link and decode the base64 string to file and save in mobile? Thanks.
Related
The same website works absolute fine in android, however in iOS it seems to come up with this message:
Possible Unhandled Promise Rejection (id:11): Error: Unable to open URL about:blank
I also seem to get this when the site URI is linking to URLs from a different domain.
I have tried adding: originWhitelist={['*']}
Here is the Webview code:
<WebView
style={styles.flexContainer}
startInLoadingState
renderLoading={() =>
<View style={styles.container}>
<ActivityIndicator size="large" color="#ffffff" styles={styles.loader}/>
</View>
}
onMessage={event => {
parseWebData(event.nativeEvent.data);
}}
onShouldStartLoadWithRequest={event => {
if (!event.url.startsWith(base)) {
Linking.openURL(event.url)
return false
}
return true
}}
originWhitelist = {['*']}
source = {{ uri: base + uri }}
/>
1st try this one
<WebView
source={{ uri: base + uri }}
style={{ height: 400, width: 400 }}
useWebKit={true}
startInLoadingState={false}
javaScriptEnabled
domStorageEnabled
/>
onShouldStartLoadWithRequest={event => {
if (!event.url.startsWith(base)) {
Linking.openURL(event.url)
return false
}
return true
}}
This was the problem.
iOS treats any URL load with this, whereas Android only fires this on clicking.
See this post for the explanation of the issue:
onShouldStartLoadWithRequest automatically calling in iOS React Native on loading of any url in WebView, How to control it?
I am trying to extract the POST response from the WebView in React Native but onMessage doesn't seem to solve this. The code below works to navigate a website using the WebView but it does not console.log anything. Is there anything I'm missing or misreading in the documentation for WebView?
import { WebView } from "react-native-webview";
return (
<WebView
source={{
uri: `https://www.example.com/`
}}
onMessage={(event)=>console.log(event)}
/>
);
The onMessage function is used for Web and communication.
You can use window.ReactNativeWebView.postMessage
Example
const runFirst = `window.ReactNativeWebView.postMessage("this is message from web");`;
<WebView
source={{
uri:
'https://github.com/react-native-community/react-native-webview',
}}
injectedJavaScript={runFirst}
onMessage={(event)=> console.log( "On Message", event.nativeEvent.data )}
/>
Im storing the local file in xcode,files are loading in simulator but not loading in ios device
im using react-native-webview version 5.0.1, in my webview im passing sourse as {uri: 'ICF-Package/ICFPackage/index.html'}
<WebView
source={Platform.OS === 'ios' ?
{uri: 'ICF-Package/ICFPackage/index.html'} :
{ uri: 'file:///android_asset/ICF-Package/ICFPackage/index.html' }
}
ref={(webView) => this.webView = webView}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit = {true}
//scalesPageToFit={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={true}
/>
im not getting any error message but files are not loading in real device
Maybe that helps you to debug WebViews a bit deeper if running at your Device: https://stackoverflow.com/a/48572797/1256697
But as little Workaround for local files, you could try to use the 'html' parameter instead the 'uri' Parameter for IOS:
const myHTML = require('./ICF-Package/ICFPackage/index.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
Also see: https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
But maybe the cleanest way to solve it for IOS is to put a copy of your html-File in Project > resources > index.html and link it like that with your Webview:
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={'./resources/index.html'}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
Currently I am loading a html file from my android assets folder into webview.
dashboard.html file contains some scripts.
if its static it works fine.
<WebView
ref={(component) => (this.webview = component)}
style={{ height: height * 1.3 }}
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
startInLoadingState={true}
javaScriptEnabledAndroid={true}
mixedContentMode={'compatibility'}
/>
But I need to dynamically update a variable in my script.
How can I access scripts placed in assets folder from react-native component.
You can use forceUpdate();
e.g.
<webView source={{html: this.state.html}}></webView>
onTestBtnClicked() {
const html = '<div>test1</div>';
this.setState({ html });
this.forceUpdate();
}
You can't access and update a script file but maybe you can run your script or extra code once the WebView is loaded using the injectedJavaScript prop
Example:
const injectedJs = `
alert("My custom code will go here!");
`;
return (
<WebView
ref={(component) => (this.webview = component)}
style={{ height: height * 1.3 }}
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
startInLoadingState={true}
javaScriptEnabledAndroid={true}
mixedContentMode={'compatibility'}
injectedJavaScript={injectedJs}
javaScriptEnabledAndroid={true}
/>
);
I want to get html code with webview in react native my current code only can call alert function after its injected. i want to get a specific div html content.
const jsCode = "window.postMessage(alert(document.getElementById('result')))"
<WebView
style={{width:Dimensions.get('window').width,height:Dimensions.get('window').height}}
javaScriptEnabled ={true}
injectedJavaScript={jsCode}
source={{uri: this.state.uri}}
/>
window.postMessage causes the WebView.onMessage-handler to get called with the data.
So this should work:
const jsCode = "window.postMessage(document.getElementById('gb-main').innerHTML)"
<WebView
javaScriptEnabled={true}
injectedJavaScript={jsCode}
source={{uri: 'http://www.google.com/'}}
onMessage={event => console.log('Received: ', event.nativeEvent.data)}
/>