React-native: [WebView] WebView on android can`t execute javascript

Created on 6 Jan 2016 · 29Comments · Source: facebook/react-native

              <WebView
                style={[styles.webview, {
                    height: this.state.height || 400
                }]}
                javaScriptEnabled={true}
                bounces={false}
                onNavigationStateChange={this._onNavigationStateChange}
                html={this._getHTML(content)}
            />

javascript inside WebView page do not execute.
On iOS it works fine.

Locked

Source

magicismight

👍3

Most helpful comment

Set true both javaScriptEnabled and domStorageEnabled

javaScriptEnabled={true}
domStorageEnabled={true}

iineva on 30 Nov 2016

👍5 😄1

All 29 comments

Hey magicismight, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

facebook-github-bot on 6 Jan 2016

You need to enable JavaScript via a a prop - http://facebook.github.io/react-native/docs/webview.html#javascriptenabled

satya164 on 6 Jan 2016

@satya164
I have tried that.
Didnt work. Tried to useinjectedJavaScriptdidnt work either

magicismight on 6 Jan 2016

👍1

I tried to use react-native-webview-android
the Javscript inside page didnt execute. But javascript throughinjectedJavaScript` worked

magicismight on 6 Jan 2016

👎1

Can you give a minimal reproducable example of the code that's not working?

cc @mkonicek

satya164 on 6 Jan 2016

We don't provide supports third party plugins. Have you tried the one included in React Native?

satya164 on 6 Jan 2016

@satya164
yes.
after I tried everything in React Native.it didn`t work out,then I tried the third party plugin.

magicismight on 6 Jan 2016

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  WebView
} = React;

let html =  `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <style>
    html,
    body{
        overflow: hidden;
    }
    *{
        padding: 0;
        margin: 0;
        font-size: 14px !important;
        color: #666 !important;
        max-width: 100% !important;
    }
    </style>
</head>
<body>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</body>
<script>
(function () {

    document.write('nothing');
}());
</script>
</html>
`;

var marry = React.createClass({

  render: function() {
    return (
      <View style={styles.container}>
        <WebView
                style={[{
                    height: 400,
                    width: 320
                }]}
                javaScriptEnabled={true}
                bounces={false}
                onNavigationStateChange={this._onNavigationStateChange}
                html={html}
            />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('marry', () => marry);

qq 20160106182426

magicismight on 6 Jan 2016

same code.
different results.

magicismight on 6 Jan 2016

closed
The attribute should be javaScriptEnabledAndroid instead of javaScriptEnabled as document said.

magicismight on 7 Jan 2016

javaScriptEnabledAndroid is only used on 0.17.0
0.18.0 javaScriptEnabled works fine

magicismight on 7 Jan 2016

Is there a resolution for this problem? As of 0.20 I still can't get Javascript to work on Android.

bomalley on 19 Feb 2016

Also can't get it to work... Here's my render:

render() {
    let html = '<div id="myContent">This is my name</div>';
    let jsCode = 'document.querySelector("#myContent").style.backgroundColor = "red"';

    return (
      <View>
        <WebView
          source={{html: html}}
          injectedJavascript={jsCode}
          javaScriptEnabled={true}
          style={this.props.style}
        />
      </View>
    );
  }

And the result:

screen shot 2016-02-28 at 01 50 28

The div background should be red.

LightningK0ala on 28 Feb 2016

It seems to work if I include the javascript as a script in html like this:

render() {
  let html = `
    <div id="myContent">This is my name</div>
    <script>
      document.querySelector("#myContent").style.backgroundColor = "red"\
    </script>
  `;

  return (
    <View>
      <WebView
        source={{html: html}}
        javaScriptEnabled={true}
        style={{ width: 100, height: 100}}
      />
    </View>
  );
}

LightningK0ala on 1 Mar 2016

Nothing is working is there is any other method to do it

uc-des on 9 Jul 2016

Worked for me by adding baseUrl like this:

nopopon on 26 Jul 2016

👍5

Set true both javaScriptEnabled and domStorageEnabled

javaScriptEnabled={true}
domStorageEnabled={true}

iineva on 30 Nov 2016

👍5 😄1

on android I got it finally to work after I've put semicolon ";" at the end of every command, for example;

this works:

let jsCode = `
      document.body.style.backgroundColor = \'#6DAF45\';

      var menuButton = document.getElementById("responsive-menu-button");
      menuButton.parentNode.removeChild(menuButton);

      var header = document.getElementById("header");
      header.style.visibility = \'hidden\';
      header.style.height = 0;

      var innerBannerArea = document.getElementById("inner-banner-area");
      innerBannerArea.style.height = 1;
      innerBannerArea.style.opacity = 0.0;

      var footer = document.getElementById("footer");
      footer.style.visibility = \'hidden\';
    `

and this breaks the whole javascript, check line 2 in "jsCode" in the variable:

let jsCode = `
      document.body.style.backgroundColor = \'#6DAF45\';

      var menuButton = document.getElementById("responsive-menu-button");
      menuButton.parentNode.removeChild(menuButton)

      var header = document.getElementById("header");
      header.style.visibility = \'hidden\';
      header.style.height = 0;

      var innerBannerArea = document.getElementById("inner-banner-area");
      innerBannerArea.style.height = 1;
      innerBannerArea.style.opacity = 0.0;

      var footer = document.getElementById("footer");
      footer.style.visibility = \'hidden\';
    `

menuButton.parentNode.removeChild(menuButton) <- is missing semicolon

Goran1708 on 7 Mar 2017

👍3

The issue seems to depend on the android SDK version.
using 23 fails and it works using version 24 and 25 .
this might require more testing on real device like samsung to see if it works on 23 on some real devices.

jpoutrin on 10 Mar 2017

👍5

@iineva You saved me. I searched whole day. My opencart checkout page is not working in android webview. But by adding setDomStorageEnabled(true) it's worked like charm. Thank you so much.

atulamuwa on 30 May 2017

@Goran1708 Thanks. Solved my problem.

ThomasXu18 on 18 Aug 2017

I am using RN 0.48.2 and I am still facing same issue on android API version 21 or below. It works fine for API version 23 and above. I haven't tested API version 22.
I have tried adding javaScriptEnabled={true} and domStorageEnabled={true} but nothing changed. Did it work for anyone running android version Lollipop or below?
I can see 3-4 different solutions which worked for different people which makes it hard to understand what was the real issue and how it was fixed.

ggsrivas on 31 Jan 2018

I've figured out Android WebView bug.
Even in Android API >= 23 and react-native 0.52.
=> If your JavaScript code contain any comment => javascript will not run

I have to remove every comments in order for JavaScript to run.

In ios, comments is fine. Android is so weird.

solominh on 31 Mar 2018

😕1

@solominh not working with or without comments

if4lcon on 5 Apr 2018

I can confirm that WebView Javascript code is not executed on android 4.4.2 device (API 19) and maybe some higher versions of android. Neither inside blocks in html, neither inside injectedJavaScript prop. Tried everything described here. I use RN 0.50.0.
Have someone faced with this issue and solved it somehow?

ghost on 6 Apr 2018

👍2

In my case, I was using let instead of var and webview was not able to execute my javascript. Which makes sense. Please double check that you are using plain javascript not ES6 syntax. This is just one of the possibilities.

ggsrivas on 6 Apr 2018

It’s working on real device but not on emulator

if4lcon on 6 Apr 2018

I am also facing the same issue my html file has some script include (loading some external js bundle file) after going through all the suggestion i removed comments from that bundle but no luck .
Can anybody help me how to debug it in Android. I am checking network tab also no calls are going to load the bundle file.