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 anOpen 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 aOpen 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 firstOpen 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 overridingwindow.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.