Android WebView JavascriptInterface Property

Question

Hey I am working with an app that has to interface with some javascript (coffeescript) code. The code JS code looks something like this:

$(".content").on "click", ".feedback", ->
      window.webkit.foo.bar.message("hello")
      false

So I need to add a javascript interface to my WebView like:

 webView.addJavascriptInterface(new Window(), "window");
 ...
 class Window {
   @JavascriptInterface
   public Webkit webkit() {
     return new Webkit();
   }
   class Webkit {
     @JavascriptInterface
     public Foo foo() {
 ...

I am running into two problems here, first it appears you can't add properties to the global window object. And second when I change my interface name to something else, I can't seem to figure out how to add properties rather than methods.

I can get it to work in a way like this:

  webkit().foo().bar().message("hello")

Has anyone done anything like this?

Thanks!

I do not understand your target :-( First of all you can not return a Java object (Webkit) to javascript as described here: stackoverflow.com/questions/9105059/…. Use primitives or String (maybe JSON) instead. — A.D.
– A.D., Commented Sep 9, 2015 at 5:50
So after reading that there is no real way to pass object properties through since only primitives can be sent? @user2281606 — trev9065
– trev9065, Commented Sep 9, 2015 at 12:58
yes, just primitives + strings. Is your target to show a native dialog with "webkit().foo().bar().message("hello")"? Sorry for probing — A.D.
– A.D., Commented Sep 10, 2015 at 12:23
I am not trying to show a dialog specifically. The reason for doing the dot notation is that is how our iOS clients native functions are defined. — trev9065
– trev9065, Commented Sep 10, 2015 at 12:35

Mikhail Naganov · Accepted Answer · 2015-09-10 01:25:10Z

5

The window object in browsers (and in WebView) already has a window property, which points back to the same object. Try evaluating this in your JavaScript debugger console:

> window.window === window
< true

So trying to inject a Java object with a name "window" would produce confusing results and may break code, since you will likely break this invariant.

And it is also true that Java Bridge only exposes function objects through properties, it doesn't support exposing getters or setters. Though, you can overcome that with a bit of JavaScript magic by defining getters and setters yourself. You will need to expose getter and setter methods on your injected object and then assign them to be property getter setters with JavaScript.

So, in Java you name method differently, e.g.:

webView.addJavascriptInterface(new Window(), "myWindow");

class Window {
  @JavascriptInterface
  public Webkit getWebkit() {
    return new Webkit();
  }
  ...

And then after you have loaded the page, you can execute JavaScript code like this:

Object.defineProperty(myWindow, 'webkit', { get: myWindow.getWebkit });

Then both calling getWebkit() and accessing webkit on myWindow will mean the same thing.

answered Sep 10, 2015 at 1:25

Mikhail Naganov

6,9111 gold badge28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

trev9065 Over a year ago

Yeah, I wasn't trying to overwrite window, just add a property on window. This is actually done for you once you add a WebChromeClient on the WebView. Although I realize now that my question wasn't quite clear, but it was really just trying to figure out if there was a way to add js objects to window rather than functions. The iOS client defines native functions on window.webkit.messageHandlers and I was trying to reuse this method on Android. I don't believe this is possible from your answer.

Mikhail Naganov Over a year ago

Ah, I think I see what you mean, and the answer is addJavascriptInterface can only add JS object to window. So if you need some hierarchy, like you said window.webkit.something -- then you'll have to do some lifting on the JS side, e.g. converting methods into properties, like I proposed. Or another way is to inject both webkit and something as top-level properties, and then in JS code do something like webkit.something = window.something, basically creating an alias.

trev9065 Over a year ago

Thanks for the tip. I was hoping we wouldn't have to do that.

Collectives™ on Stack Overflow

Android WebView JavascriptInterface Property

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related