Add Javascript to Axure Prototypes

Javascript can be added to Axure as Plugins on Axshare. This is the official method of adding javascript to Axure prototypes. This only works when an Axure prototype is hosted on Axure.

There is another way to add custom Javascript to an Axure prototype without modifying the HTML generated by Axure. The trick is use the Open link in current window action. An example;

  • Put a widget on a page.
  • In the OnClick event on the widget add an Open link in current window action.
  • In the URL of the Open link in current window action enter:
javascript:alert("Hello");void(0);

Please note that:

  • It is very important that the last statement evaluates to void otherwise Internet Explorer will replace the contents of the page with the value.
  • Single line comments // should not be used. Axure removes all line breaks from the URL, and a single line comment makes the rest of the script a comment.

Preview the prototype and click on the button, and the javascript alert will show up. This example is not very useful, but here is one that is. Assume that you would like to jump 2 pages back in the browser history when you click on the button. By default Axure can only jump one page back, but if you enter the following javascript in the Open link in current window URL it can jump back 2 (or more) pages.

  • Put a widget on a page.
  • In the OnClick event on the shape add a Open link in current window action.
  • In the URL of the Open link in current window action enter:
javascript:window.history.go(-2);void(0);

Preview the prototype. When you click on the button, the browser will jump two pages back. In order for this to work, there must be some pages in the browser history.

Open link in current window javascript injection is described in more detail here

A better way to add Javascript to Axure Prototypes

The javascript in the URL of an Open link in current window action is executed with a delay in Chrome, FireFox and maybe also other browsers. This means that the javascript is not executed in sync with other actions. Another problem is that multiple Open link in current window actions cancel out each other. Only the javascript in the last Open link in current window action is executed.

It is possible to avoid these limitations by overriding the global window.open browser function, so that javascript can be executed using an Open link in new window/tab action. The new window.open function check if the URL passed to the function contains javascript. If it does the javascript is executed, otherwise the function works as normal. An example is available here.

  • The javascript that overrides the global window.open function must run before the first Open link in new window/tab containing javascript action is executed. This is achieved by inserting the javascript a webfont tag that can be specified in the Axure IDE. An example is available here.
  • Overriding window.open requires a workaround described here. Without the workaround overriding window.open is not possible in IE7 and maybe also other browsers.

In order to make it easier to enhance my prototypes with custom javascript I have created a small javascript library called Axure.Ex. It can be downloaded here.