Skip to content

Comments on WebView injected script will break the scipt #9749

@mishuagopian

Description

@mishuagopian

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);

Working example

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions