If I pass the amp url to react native webView, it shows a page that asks to the user, whether to redirect to amp page or not.
I want to show the amp page on web view without redirection, but how can I do that?
This is the webview component I use.
https://github.com/react-native-community/react-native-webview
<WebView
useWebkit
startInLoadingState
renderLoading={() => (
<View style={styles.spinnerContainer}>
<Spinner color={commonColor.lightBlue} />
</View>
)}
renderError={() => (
<NetworkError
refetch={() => {
WebViewRef && WebViewRef.reload();
}}
/>
)}
allowsBackForwardNavigationGestures
source={{ uri: url }}
/>
so here source uri, if I put the amp page url such as
https://www.google.co.jp/amp/s/www.traicy.com/20190127-ktrdia%3famp=1
it shows a page that asks whether or not redirect to the amp page. If you click yes, it shows the amp page though.
Related
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.
I have a simple webview,see below;
<WebView
source={{ uri: 'https://example.com/',
headers: {
Cookie: 'cookies=dismiss; ui=darkmode',
},
}}
originWhitelist={['https://*']}
allowsFullscreenVideo={true}
pullToRefreshEnabled={true}
sharedCookiesEnabled={true}
geolocationEnabled={true}
/>
Now with inside my webview people can have profiles and links to third-party websites, how do I make those links to use an external web browser or expo web browser instead of loading them in my webview.
Using expo for the project.
if that url differs from the original domain, stops the loading, preventing page change, and opens it in the OS Navigator instead.
import * as Linking from 'expo-linking';
const webviewRef = useRef(null);
<WebView
ref={webviewRef}
source={{ uri : 'https://example.com/' }}
onNavigationStateChange={(event) => {
if (!event.url.includes("example.com")) {
webviewRef.stopLoading();
Linking.openURL(event.url);
}
}}
/>
I have a simple web view setup within react-native
I have nav bar at the bottom and the links open different screens with web views, however the pages save state. SO let's say I navigate to an internal page on the website (so like the about page of the website) when I go onto another screen and come back to the screen - the url state is saved. How can I make it so when I click on the nav button it always redirects to me to the initial page loaded in the web view...I've committed links etc as its sensitive data.
USE CASE:
User opens app, is greeted with a homepage - they can click links on the homepage which takes them to another part of the web page - if they navigate away from the Home Screen (within the app) then go back to the Home Screen on the app - the web view is on the last internal page they were on.
I want it so when they press the home button on the nabber on the app it effectively resets the web view?
Thanks
Code below:
const url = "websitelinkere.com/pageLink.html";
...
<View style={{ flex: 1 }}>
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
mixedContentMode={'compatibility'}
source={{
//meta type & http header locking for aded security
uri: url, //<-- I want it to always load pageLink.html <-- even if I've navigated to pageLinkDifferent.html
}}
onMessage={(event) => {}}
/>
</View>
Navbar (example link):
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
<Image style={homePage.navImage} source={journalHomeImage}/>
</TouchableOpacity>
</View>
I've tried researching the issue on stack overflow and online but haven't found a solution that works for me
you can use useFocusEffect in react-navigation
const INITIAL_URL = "websitelinkere.com/pageLink.html";
...
const webviewRef = useRef();
const [url,setUrl] = useState(INITIAL_URL)
...
useFocusEffect(
React.useCallback(() => {
if(webviewRef.current) {
setUrl(INITIAL_URL);
webviewRef.current.reload();
}
}, [])
);
...
<Webview
ref={webviewRef}
source={{ uri }}
/>
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)}
/>
I'm trying to access the HTML source code of a 3rd party web page to read a specific DOM element value of a page which is loaded in WebView component in react-native.
<WebView
source={{uri: 'https://www.amazon.com'}}
/>
and Suppose there's a DOM element like this:
<span class="price bold some-class-name">$459.00</span>
I also tried this component but could not do that:
https://github.com/alinz/react-native-webview-bridge
Is there any way to get the current HTML source code of page inside a WebView and Read specific DOM element value?
Looks like this functionality was added in React Native v0.37. Adding an onMessage parameter will inject a postMessage variable into your WebView. You can then just inject JavaScript as normal, select your element and postMessage it back.
render (
const jsCode = "window.postMessage(document.getElementsByClassName("price bold some-class-name"))"
return (
<View style={styles.container}>
<WebView
source={{uri: "http://..."}}
onMessage={this._onMessage}
injectedJavaScript={jsCode}
/>
</View>
);
)
The answer by Brian F is great and helped me a lot. There is just one thing missing. You need to append ReactNativeWebView to the postMessage function.
So it would look like
render (
const jsCode = "window.ReactNativeWebView.postMessage(document.getElementsByClassName("price bold some-class-name"))"
return (
<View style={styles.container}>
<WebView
source={{uri: "http://..."}}
onMessage={this._onMessage}
injectedJavaScript={jsCode}
/>
</View>
);
)
In my experience, It will work well, because I've tried to get product information from Amazon and Taobao, Rakuten.
_onMessage = (message) => {
// you can put processing code here.
}
render (
const jsCode = "window.ReactNativeWebView.postMessage(document.getElementsByClassName("class name"))"
// or you can use `document.querySelector("element query")` instead of `document.getElementsByClassName("class name")`
return (
<View style={styles.container}>
<WebView
source={{uri: "url here"}}
onMessage={this._onMessage}
injectedJavaScript={jsCode}
/>
</View>
);
)
For those who are still not getting then try this for the latest react-native
window.ReactNativeWebView.postMessage(document.getElementById('id_here').innerHTML);
const INJECT_JS = `window.ReactNativeWebView.postMessage(document.getElementById('id_here').innerHTML);
alert("Hel0....")
`
return (
<View style={styles.container}>
<WebView
source={{uri: "http://..."}}
onMessage={event => {
console.log(event.nativeEvent.data);
}}
injectedJavaScript={INJECT_JS }
/>
</View>
);
<WebView
source={{html: "<span class="price bold some-class-name">$459.00</span>"
/>
or you can right your template into a constant, then do this:
const HTMLTemplate = `<span class="price bold some-class-name">$459.00</span>`;
<WebView
source={{html: HTMLTemplate}}
/>