I am loading a React Native's WebView component like so:
<WebView
source={{uri: 'http://www.example-one.com'}}
onMessage = {(event) => console.log(event.nativeEvent.data)}
/>
And inside my www.example-one.com I add this javascript code
window.postMessage('It works!!');
This works great and I am able to the message from www.example-one.com in my React Native's console.
However, when I load the same WebView with same source and redirect the user to different source say www.example-two.com from inside wwww.example-one.com and add the javascript code inside www.example-two.com i.e.
window.postMessage('It works from example two!!');
then I don't see that message inside React Native's console.
Is there any work around to make this work?
Related
I am using react by adding react CDN in index.html file in my simple HTML, CSS, and JS editor according to
according to this doc React, and it is working fine in my code editor's preview:
Code Editor's Preview
But on the main web page, it is not showing the react output set by root.render.
My Webpage View
I want my root.render to run two times accurately and show my data as it is showing in the preview.
Even the data is showing in the console but not on the page like this:
WebPage with console
"like_button_container86551" is the ID of the div in which react app will render, you can access the complete code which I am using here React website file
I don't get the real reason but I solved it with a trick, as data was showing in the console that means that DOM is not showing the updated data so I just assign a key to my div of the content
<span onClick={handleClickOpen} key={contentKey}>
...
</span>
and after the rendering of the component in the useEffect function I increase the key by 1 which means I refresh the DOM element and now the content is shown:
useEffect(() => {
setContentKey(1 + contentKey);
}, []);
I'm trying to embed a script tag to render a form in a component. I can't figure out how to do this in React. If I took this tag and pasted it to an HTML document, the form would load perfectly, but I don't know how to do the equivalent with React.
I cant paste the actual code to embed on this site for work reasons, but I'm basically trying to embed this into a component so that a form renders and users can submit the form:
<script type="text/javascript" src="https://form.jotform.com/jsform/1234566789"></script>
Any ideas?
you can use the tag
const styles = {} // if you want to add some custom CSS
const URL = "https://form.jotform.com/jsform/1234566789" //embed URL
<iframe title="your title" style={styles} src={URL}></iframe>
read more about it HERE
I found a lovely node package that lets you embed Jotforms; you can find the NPM article here :
https://www.npmjs.com/package/react-jotform-embed
I made a component to easily embed JotForm.com forms to your ReactJS based websites or applications. It supports NextJS / Gatsby like SSR frameworks.
You also have access to some callbacks like onSubmit if you need.
You can access it here: https://npmjs.com/package/jotform-react
I need to load on WebView a part of a webpage, like a div. is it possible?
for example
<WebView
source={{uri: 'https://www.amazon.com/'}}
style={{marginTop: 20}}
/>
with a div: id="nav-shop"
how to show only this part?
I think that the best thing to do is to 'hide' div elements, but i don't how to do that. If someone have some ideas tell me.
Webview has a parameter called injectJavascript where you can manipulate the javascript of the Webview you receive.
According to the documentation, you pass the javascript you want to run as a string.
https://facebook.github.io/react-native/docs/webview.html#injectjavascript
I am trying to dynamically output some video content using an api (jwplayer). The api returns me some data to put in a script tag for instance:
.js">
This tag works perfectly with plain html, but doesn't work with react jsx. How can I use this with a react component?
Try this package react-jwplayer on npm just add your videoId to that component.
import JWPlayer from 'react-jwplayer';
<JWPlayer videoId="<your-id-here>" />
I'm making a Chrome App, and i'm using the web view tag, which is similar to an iframe.
Is there a way to load halfway down the webpage that's inside the web view?
I have tried:
<webview onLoad="window.scroll(0, 150)" class="test" src="http://example.co.uk/test.aspx"></webview>
But it seems that would be far to easy. I'm not convinced its even possible.
Thanks
Assuming for a moment that code would execute (it won't because of the CSP), window would refer to the app's page, not the embedded page.
You need to execute the code in the context of the embedded page.
If you worked with Chrome extensions before, you would know that the part interacting with web content is called a Content Script.
Apps have a similar concept for <webview> elements. You can either declare in advance which pages should get which content script while they load, or you can explicitly load a content script.
So, suppose you have a file content.js with the following contents (excuse the pun):
window.scroll(0, 150);
Also, assume you have a script app.js running inside your app page, and a variable webview is a reference to the <webview> in there.
Then, you can make the webview execute it:
Declaratively, by calling webview.addContentScripts before loading the page (e.g. before setting src from app.js code):
// Assuming <webview id="wv"></webview>
var webview = document.getElementById("wv");
webview.addContentScripts([{
name: "ExampleRule",
matches: ["http://example.co.uk/*"], // can be as narrow as you wish
js: ["content.js"]
}]);
webview.src = "http://example.co.uk/test.aspx";
Explicitly, when the page is already loaded:
// Assuming <webview id="wv" src="http://example.co.uk/test.aspx"></webview>
var webview = document.getElementById("wv");
webview.executeScript({file: "content.js"});
It is, of course, possible to make content.js much more sophisticated (for example, receive commands from the app) and/or more precisely control the timing of your operation - but those are at this point generic content script questions for which you can find solutions elsewhere or ask a new question.