Comments on WebView injected script will break the scipt #9749
Description
Issue Description
When injecting a script to a WebView component via injectedJavaScript prop, if the script contains any comment then it won't work on android.
Steps to Reproduce / Code Snippets
Create a WebView in which we inject a script with a simple comment in it.
Code to reproduce
import React from 'react';
import { AppRegistry, StyleSheet, Text, View, WebView } from 'react-native';
function SampleApp () {
const html = `
<html>
<body>
<h1 class="title"> Hello! </h1>
</body>
</html>
`;
const script = `
var text = "Bye!"; // This comment will break the script on android
document.querySelector(".title").textContent = text;
`;
return (
<View style={styles.container}>
<Text> WebView script comment issue </Text>
<WebView
source={{html: html}}
injectedJavaScript={script}
javaScriptEnabled
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
paddingTop: 50
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);Expected Results
Text on html h1 element ("Hello!") should be replaced with "Bye!" text.
Actual Results
Text on h1 html element changes on iOS but not on Android. Removing the comment on the js script will fix this issue.
Additional Information
- React Native version: 0.31.0
- Platform(s) (iOS, Android, or both?): both
- Operating System (macOS, Linux, or Windows?): macOS
Reacted by Gary Fung
Activity
Using evaluateJavascript to fix react#9749
eremzeit commentedon Oct 7, 2016
I can confirm.
lacker commentedon Feb 9, 2017
Weird. I wonder if some compression is happening which removes the endline and thus turns the subsequent line into comment as well. Are you interested in sending a PR to fix this?
mishuagopian commentedon Feb 10, 2017
@lacker sure!
Here you are: #12321.
rgoldiez commentedon Apr 19, 2017
I faced the same issue on Android only (works fine on iOS). It wasn't until I ran across this issue that I was about to remove comments in the injected javascript to get my WebView to work on Android.
hellogerard commentedon May 25, 2017
This is happening for me on React Native 0.43 on Android (iOS is working fine). I found that switching from double-slash-type comments to C-style comments works.
hramos commentedon Jul 31, 2017
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!
If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.
grabbou commentedon Oct 11, 2017
I've been constantly experiencing this issue and it looks to me like a valid bug to be fixed. It fails silently when you include comments in your code and makes it really hard to debug. In my opinion, should be reopened.
CC: @rauliyohmc
hramos commentedon Oct 11, 2017
Reopening. Please take a look at the proposed fix at #12321.
stale commentedon Dec 10, 2017
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.
fungilation commentedon May 2, 2018
I'm still seeing this issue.
Properly escape JavaScript code on Android (#20366)
Properly escape JavaScript code on Android (#20366)