JavaScript support in Opera Mini 4

By Chris Mills

DEPRECATED: This article is deprecated, and a newer article with updated information is available at Opera Mini: web content authoring guidelines. You should read this one if you want updated information.

Introduction

Opera Mini is a very clever way of bringing the web to your mobile phone - it will work on most phone models, even low spec ones, as long as they will run a JVM. Basically, when you request a web page from Opera Mini, a request is sent to the Opera Mini servers. They retrieve the page, convert it into OBML (Opera Binary Markup Language,) a very compact binary markup format that reduces the page size by up to 90%, and then serve it to your phone.

This is all well and good for HTML and CSS content - the Opera Mini servers make a great job of interpreting the markup and styles and presenting them to Opera Mini in a usable format. But what about JavaScript? Here the story is not so simple - I will cover this topic in the following sections:

  1. How does Opera Mini interpret JavaScript?
  2. Server-side support
  3. Client-side support
  4. Ajax support

Note: Security is an important matter, which Opera takes very seriously. The connection between the Opera Mini client and server is always encrypted, whether the original site is HTTP or HTTPS, therefore you can trust Opera Mini to be secure.

Visit our Opera Mini & Opera Mobile page for details and download instructions.

How does Opera Mini interpret JavaScript?

We need to consider where the JavaScript is executed - on the server, before the page loads, or after the page loads. The Opera Mini servers are based on the new Opera 9.5 rendering engine, which means that Opera Mini has full support for server-side JavaScript (ECMAScript 3.)

On the client-side, however, support is limited by the hardware limitations of the handsets; therefore the Opera Mini client itself only supports a limited subset of JavaScript, which means:

  1. Limited support for DOM events
  2. No background scripting
  3. Very limited Ajax support

We'll look at this in more detail in the sections below.

Server-side support

As mentioned above, the Opera Mini servers are based on the brand new Opera 9.5 rendering engine, which means that all scripts executed before a page is fully loaded will work as expected when your page is loaded in Opera Mini. This includes manipulation of elements in the DOM tree. Furthermore, the body-element's onLoad event is fired and its code executed server-side before the page is transferred to the client.

The only caveat to consider here is that we don't allow scripts to run for more than a second or two once the page has finished loading, and will not allow any scripts to run before the user does some kind of user interaction (such as click a link or submit a form) - therefore interval() and delay() are disabled. The same is true for xmlrpc requests - they work but are only allowed to run for a few seconds. Once the page is sent to the client, all scripts are stopped.

Client-side support

After the page has been transferred to the client, things are a lot more limited - basically all events are processed on the server. The client does absolutely no JavaScript processing at all, and instead the page is kept in the server (basically the client works as an input device for the opera running in the server). No background scripts running after the page is loaded will be executed, and executing code using setTimeout is not possible.

The supported events are as follows:

  1. Loading: normal event processing is done for onLoad and onUnload.
  2. Forms:
    1. onSubmit
    2. onChange: this even works during filling out a form, not just on submitting the entire form. For example, if you have 2 form fields, "Select Country" and "Select State/Region," and the second one changes depending on the country you selected in the first one, Opera Mini will reload to display this change
    3. onClick on buttons (bear in mind that events will only be fired when the form is finally submitted, not while it's being edited in the client, therefore onFocus would not work)
  3. Clicks: onClick is implemented as a mouse motion to the coordinate being clicked (onMouseEnter, onMouseOver, onMouseLeave etc) followed by onMouseDown followed by onMouseUp and finally onClick.

All other events are ignored/not applicable, for example:

  1. key/mouse events (onMouseOver/-Out/-Down/-Up, onKeyDown/-KeyPress)
  2. focus events (onBlur, onFocus, as mentioned above)

This sounds limiting, but there is another point to consider - Opera Mini can execute JavaScript on the server if it's triggered by the JavaScript events listed above in the client, so some complex pages work surprisingly well - for instance Facebook is able to display popup menus and popup dialogs very well on Opera Mini.

Ajax Support

Given handset limitations and Opera Mini's client-server architecture, "Ajax" applications cannot be expected to work as expected on Opera Mini. XMLHttpRequest is supported, therefore many "Ajax" sites will function pretty well, for example iGoogle (you can't move boxes around, but you can add and delete them, and change themes,) and GMail (this mostly works, although you don't get new mails appearing automatically.)

Sites that use Ajax to trigger very regular page changes however, such as Google Suggest and the automatic new mail functionality of GMail mentioned above won't work. Other examples of things that don’t work are IRC-like chat-clients using server-side events, and clocks.

As mentioned above, client-side events are basically limited to form changes (onChange and onClick) and clicking (onClick, links, submits etc, basically everything you can do clicking with a mouse,) so things that react to user input (clicking, or changing form values) usually work, unless they need to see each individual character inputted (eg Google Suggest,) or react to changing state in the outside world (eg new mail, new text message, end of the world, the time etc.)

What it all boils down to is that once a page has been rendered by the server it won't change until the user clicks something.

Chris Mills is a web technologist, open standards evangelist and education agitator, currently working at Opera Software in the developer relations team. He spends most of his time writing articles about web standards for dev.opera.com and other publications (such as .net mag and A List Apart), giving talks at universities and industry conferences, and lobbying universities to improve their web education courses. He believes that education is the answer to everything, but in particular he is passionate about using education to improve the overall content quality, accessibility, usability and future-viability of the Web.

He is the creator of the Opera Web standards curriculum, contributor to the WaSP InterACT project, and coauthor of InterACT with web standards: A Holistic Approach to Web Design. In August 2011, he also accepted the position of co-chair of the newly-formed Web Education Community Group.

Outside work he is a heavy metal drummer, proud father of three and lover of good beer.


This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.