You got this one web view with Javascript and you want to talk to Javascript running in another web view, for reasons that I’m totally unsure of. Maybe you want to impress the girl in the coffee shop with your hard core coding expertise. Maybe you wanna go for a promotion and your manager is all like, “I need to see you innovate!” Maybe you think it’s just cool to load two web views that know one another. Hi, I’m Cliff, you’re here because you want to tote two web views. I’m here to show you how it’s done.
I haven’t posted anything in a month of Sundays. I never understood why people use dumb phrases like “a month of Sundays”. If there were only Sunday “days” in the month then it would be kind of short because you only get four of them… and that doesn’t seem like it makes much sense. I say that because people use that phrase to indicate long elapsed periods of time and a month of Sundays is only four days. People should just get over themselves and say I haven’t seen you in four days without all of the, “I need you to do the Maths and figure out what I’m talking about”. People are dumb. I digress.
I was beginning to tell you about this thing I’m doing with web views. I did it because I’ve been asked how to do it like two times. I got tired of pretending to know what I’m talking about so I prototyped it and I’m going to post my stuff here and just point to this page from now on. Plus, like I said earlier it’s been a month of Sundays (or four days if you don’t like Maths). So here goes. For those three of you who visit regularly I’m sorta back but not quite. Testing the waters a bit.
Back to these talking web views… the idea is simple. a mobile app with Javascript in one web view makes something happen in a second web view in the same app. To make it work you need to know two things, how to call from Javascript into native code and how to call from native code into Javascript. Tonight’s example will demonstrate how we will demonstrate how this is done on Android but I can show the same example on iOS.
Let’s start with main layout saved in a file call main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:layout_width="fill_parent"
android:layout_height="250dp"
android:id="@+id/myWebView"
android:layout_gravity="center"/>
<WebView
android:layout_width="fill_parent"
android:layout_height="250dp"
android:id="@+id/secondWebView"/>
</LinearLayout>
</FrameLayout>
We have a linear layout set to vertical orientation. There are two nested WebViews defined, “myWebView” and “secondWebView”. Each will appear one above the other. Next we define a main activity.
package com.example.JavascriptBridge;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
/**
* Called when the activity is first created.
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView myWebView = (WebView) this.findViewById(R.id.myWebView);
myWebView.getSettings().setJavaScriptEnabled(true);
//Magic Javascript handling class to be defined later
final JavaScriptHandler scriptHandler = new JavaScriptHandler(this);
myWebView.addJavascriptInterface(scriptHandler, "MyHandler");
myWebView.loadUrl("file:///android_asset/view1.html");
WebView otherWebView = (WebView) this.findViewById(R.id.secondWebView);
scriptHandler.setRelayWebView(otherWebView);
otherWebView.getSettings().setJavaScriptEnabled(true);
otherWebView.addJavascriptInterface(scriptHandler, "MyHandler");
otherWebView.loadUrl("file:///android_asset/view2.html");
}
}
We set Javascript enabled on both views. We have a magic Javascript handler class which we will define next. This is a custom class which we stuff inside the first WebView using the addJavascriptInterface() method on the WebView class. This method makes ordinary Java objects appear as Javascript objects to code running inside a WebView. (We will soon add Javascript code that makes calls on the magic class.) Next we load an HTML file, “view1.html” into our first view. We grab our second WebView and give it to our JavascriptHandler which will relay information from the first WebView. We setJavascript enabled on the second WebView and put our magic JavascriptHandler object in it as well, just for good measure. We load view2.html as the content for the second view.
Let’s see our first HTML file, view1.html:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Bridge</title>
</head>
<script>
</script>
<body>
Java/Javascript Bridge example
<form id="inputform">
Value to pass: <input type="text" name="user_input">
<input type="button" name="pass" value="relay!" onclick="window.MyHandler.setValue(inputform.user_input.value)">
</form>
</body>
</html>
Not much here. There’s a typical HTML form with an input text field and a button. The onClick() action of the button has Javascript that talks to a special object called “MyHandler”. This object was defined in the Activity above, if you recall these lines:
final JavaScriptHandler scriptHandler = new JavaScriptHandler(this);
myWebView.addJavascriptInterface(scriptHandler, "MyHandler");
The handler, which we’ll define next, exposes a setValue method. We call this method and supply the value from the earlier input text field. Let’s see the magic inside the custom JavaScriptHandler class definition.
package com.example.JavascriptBridge;
import android.webkit.WebView;
public class JavaScriptHandler {
MainActivity parentActivity;
private String value = "unset";
private WebView relayWebView;
public JavaScriptHandler(MainActivity activity) {
parentActivity = activity;
}
public void setValue(String val){
this.value = val;
relayWebView.loadUrl("javascript:second_inputform.second_user_input.value='" + value + "'");
}
public String getValue() {
return value;
}
public void setRelayWebView(WebView relayWebView) {
this.relayWebView = relayWebView;
}
}
Inside the JavaScriptHandler custom class we have a WebView property, relayWebView which we saw used in the MainActivity. There is also a value property but inside the property set method we have additional logic to relay the value to the relayWebView property. We do this by calling the loadUrl() method on the relayWebView and passing in javascript code using the “javascript:” protocol. (When you ask a WebView or web browser to load a Url prefixed with the “javascript:” protocol is will execute any javascript included after the protocol prefix.) The Javascript assumes there is a “second_inputform” with a “second_user_input” text field and attempts to set the value of this text input. Let’s look at the view2.html which we load into the relayWebView from the MainActivity.
<!DOCTYPE html>
<html>
<head>
<title>Javascript 2nd Page</title>
</head>
<body>
Passed value shows here!
<form id="second_inputform">
Value Received: <input type="text" name="second_user_input">
<input type="button" name="button" value="reset" onclick="second_inputform.second_user_input.value='enter text above'">
</form>
</body>
</html>
Here you see the “second_inputform” with the “second_user_input” text input. So when the earlier Javascript is injected and executed you will see the text from the first WebView relayed to the second WebView. That’s the entirety of it! Since I haven’t posted source in what we used to describe as a “month of Sundays” but now understand should be much more than a four day-long month, it’s going to take me a while to figure out how to glue my example project to this blog post.
I used to be so much better at gluing code to blog posts but these days I don’t even remember how to log in to my site as the administrator. With any luck, the code will be found as an attachment or maybe something with a little paper clip icon hanging on the side bar. I’m not really sure but I’ll figure that out now. There! I just remembered the Box widget on the right hand side. You can find my Jvascriptbridge.zip project there. Until next time… which might not take an entire month of Sundays if I get my act together…
Getting one’s act together is another one of those things people say. I’ve never acted nor do I belong to a drama club, so I would have a hard time getting my act together. For example, if I had an “act” how did it become disassembled in the first place? I would imagine various pieces of what would have been “my act” scattered randomly on the floor. I would probably hire somebody to piece it back together because I suck at act assembly. That would take a while because last time I looked in the Yellow Pages there was no section for “Act Assemblers”. I could find “Plumber”, and “Doctor” just fine. “Mechanic” was there, as well as “Actor” but not “Assembler”. It’s late, and I probably should go now. If you’re into programming stuff, check back. I promise I won’t ramble senselessly on my next post… unless you like my rambling. And if you do like it maybe I’ll put up one of those PayPal links so people can pay me for rambling. Yes it’s late. I should do other stuff like sleep. Thanks for reading! 🙂
while my left ear is tuned to the kids… making sure they are well behaved. The device does more than that. It pairs with multiple devices so I can use it to record audio over my screencasts on my Mac. I can also stream audio from iTunes (though for some reason Bluetooth audio from the MacBook sounds like it uses voice audio encoding which makes everything sound like it’s played over the phone… something I’m still trying to figure out….) and take a phone call right in the middle of 
Even phone calls come through in stereo. You get that in the machine feeling when you favorite song is cranked way up then you get a call which comes through in surround sound. Tap the button to pick up the call, tap again to end the call, then tap mode then the main button again to resume Reggae ’94.
Can't see nothing but the source code 