Skip to content

Add support for injectJavaScript #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add support for injectJavaScript #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
512a43b
Add inject method
Jul 23, 2024
1e02073
Add a component to test inject to the docs
Jul 23, 2024
ebc1e2a
Add Examples to the docs
Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions docs/stories/components/InjectableWebView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React, { Component } from 'react';
import { Button, View } from 'react-native-web';
import WebView from 'react-native-webview';

export default class InjectableWebView extends Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}

render() {
return (
<View>
<WebView ref={this.ref} {...this.props}></WebView>
<Button title="Inject" onPress={() => this.ref.current.injectJavaScript(this.props.script)} />
</View>
);
}
}
6 changes: 6 additions & 0 deletions docs/stories/html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React from 'react';
import { WebView } from 'react-native-webview';
import InjectableWebView from './components/InjectableWebView';
import { text } from '@storybook/addon-knobs';

const html = '<html><body><h1>Hello world!</h1></body></html>';

export const basic = () => <WebView source={{ html }} />;

export const inject = () => (
<InjectableWebView source={{ html }} script={text('script', 'window.alert("Hello from iframe!")')} />
);
9 changes: 6 additions & 3 deletions docs/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@ import * as method from './method';

import { storiesOf } from '@storybook/react';

storiesOf('HTML source', module).add('basic', html.basic);
storiesOf('HTML source', module).add('basic', html.basic).add('inject javascript', html.inject);

storiesOf('URI source', module).add('basic', uri.basic).add('onMessage', uri.onMessage);
storiesOf('URI source', module)
.add('basic', uri.basic)
.add('onMessage', uri.onMessage)
.add('inject javascript', uri.inject);

storiesOf('With method', module).add('basic', method.basic);
storiesOf('With method', module).add('basic', method.basic).add('inject javascript', method.inject);
13 changes: 13 additions & 0 deletions docs/stories/method.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from 'react';
import { WebView } from 'react-native-webview';
import { text } from '@storybook/addon-knobs';

import InjectableWebView from './components/InjectableWebView';

export const basic = () => (
<WebView
source={{
Expand All @@ -10,3 +12,14 @@ export const basic = () => (
}}
/>
);

export const inject = () => (
<InjectableWebView
source={{
uri: text('URI', 'https://react-native-web-community.github.io/react-native-web-webview/'),
method: text('Method', 'GET'),
}}
title="test"
script={text('script', 'window.alert("Hello from iframe!")')}
/>
);
6 changes: 4 additions & 2 deletions docs/stories/onMessage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h1>Hello world!</h1>
name: 'WebView',
});

document.getElementById('button').addEventListener('click', function () {
function onClick() {
if (window.opener) {
// Web new window
window.opener.postMessage(payload, window.opener.origin);
Expand All @@ -32,7 +32,9 @@ <h1>Hello world!</h1>
window.postMessage(payload);
});
}
});
}

document.getElementById('button').addEventListener('click', onClick);
</script>
</body>
</html>
19 changes: 19 additions & 0 deletions docs/stories/uri.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,27 @@ import { WebView } from 'react-native-webview';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';

import InjectableWebView from './components/InjectableWebView';

export const basic = () => <WebView source={{ uri: 'https://www.youtube.com/embed/dQw4w9WgXcQ' }} />;

export const onMessage = () => (
<WebView source={{ uri: require('./onMessage.html') }} onMessage={action(text('Text', 'onMessage'))} />
);

const js = `
const button = document.getElementById('button')
button.removeEventListener('click', onClick)
onClick = () => window.alert('Hello from iframe!')
button.addEventListener('click', onClick)
window.alert('click the button')
`;

export const inject = () => (
<InjectableWebView
onMessage={action(text('Text', 'onMessage'))}
source={{ uri: require('./onMessage.html') }}
title="test"
script={text('script', js)}
/>
);
4 changes: 4 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,10 @@ export class WebView extends Component {
}
};

injectJavaScript = (js) => {
this.frameRef.contentWindow.Function(js)();
};

render() {
if (this.props.newWindow) {
return (
Expand Down