Hello dav123456,
The method that Sam describes (first post in this thread) works for what you want to do. Have you tried that? It is a hack that adds javascript declarations to the HTML head section when Axure generates the HTML, so you don’t have to manually edit the HTML files. This allows you to make javascript calls in your Axure pages (and individual widgets, apparently.)
As I describe in my post above, you can insert declarations for external javascript by adding it to the end of the inserted code. Looks like the whole text and coloring did not port across from the old forums. The trick is to put your lines just before <meta name=
Thus, to add your calls above, the block of text to paste into the User Scalable field would be:
1"/><script type="text/javascript">window.open=window.open,window.open=function(){"use strict";"function"!=typeof String.prototype.trim&&(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")});var _open=window.open;return function(url,a,b,c,d,e,f){if("javascript:"!==url.substring(0,11)||!$axure)return window.openReplace?(window.openReplace=!1,window.location.replace(url),!1):_open(url,a,b,c,d,e,f);if(!$axure.error){var ignoreError;$axure.error=function(a){return ignoreError||(ignoreError=!confirm(a)),!1},$axure.internal(function(a){$axure.debug=""!==a.globalVariableProvider.getVariableValue("Debug")}),$axure("@Axure.OnInitialize").moveBy(0,0,{})}var script=url.substring(11).trim();if("/"===script[0]&&"/"===script[1])return!1;if("@"==script[0]||"#"==script[0]){var args=script.split("<,>"),src=args[0].split(":");if(script=$axure(src[0].trim()).text(),!script)return $axure.error('Widget "'+src[0]+'" not found.');for(var i=1;i<args.length;i++){var l=args[i].split(":");script=script.replace("[["+l[0].trim()+"]]",JSON.stringify(l.slice(1).join(":")).slice(1,-1))}if(src.length>1){var frame=$axure(src[1].trim()).$().children("iframe")[0];return frame?(frame=(frame.contentWindow?frame.contentWindow:frame.contentDocument.document?frame.contentDocument.document:frame.contentDocument).document,frame.open("text/html","replace"),frame.write(script),frame.close(),!1):$axure.error('Widget InlineFrame "'+src[1]+'" not found.')}}if(""!==script){if($axure.debug)script=eval(script);else try{script=eval(script)}catch(a){return $axure.error("Exception:\n"+a+"\n\nTrace:\n"+a.stack+"\n\nScript:\n"+script.slice(0,1024))}if(script)return _open("javascript: "+JSON.stringify(script)+";",a,b,c,d,e,f)}return!1}}(),console.log("** Axure Javascript **");</script><script src="testing/js/exporting.js"><link rel="stylesheet" href="testing/css/fonts.css"><script src="testing/js/extra.js"><script src="testing/js/a2.js"><meta name="
This might make it easier to see what’s going on… Sam’s original code insertion block:
…and with your javascript lines added:
To make it happen, you paste all that into the User Scalable field in the Mobile/Device tab of the Generate HTML properties. I recommend creating a custom HTML Generator so you can reuse this for other prototypes, then just duplicate and modify the generator for other javascript/css you want to use. This will also allow you to add your javascript to only one page (kind of… see below.)
In Axure, select Publish > More Generators and Configurations…, select HTML 1 and duplicate it:
In your new generator, paste your code into User Scalable (no or blank):
Click Generate and test it out.
Now, for your other question…
I’m not entirely sure why you need this. I presume this is for the custom CSS? If you have external javascript declarations, but never make an actual javascript call, or call the CSS styles, it won’t matter.
If you publish to Axure Share and use the Plugins feature, you can assign the plugin (apply the external .js and .css) to only specific pages. This is your best choice.
If you can’t use Axure Share, I don’t know of any way to select multiple generators for one prototype.
Here is what I’d do, though. I would create a second prototype for the “one page” and generate it with my custom JS-CSS generator. Then, back in my first prototype, that page would be blank with an OnPageLoad : Open < link to my second prototype > in Current Window so that it redirects to my special page. Then, when my special page needs to go to another page, use a link to the first prototype. Make sense?
Another approach would be to publish the second prototype with the one special page, but in the first prototype, put an Inline Frame widget on that page and call the second prototype to load in that inline frame.
Some general notes on this…
-
You will need network access to your external .js files or it won’t work. Seems obvious, but it can trip you up if you are testing outside a company firewall or that server is down, or you are testing remotely and your usability lab’s wi-fi is down… all the things that shouldn’t happen but do.
-
This works with the Preview (F5) as long as your custom generator is default, or you choose it from Publish > Preview Options (Ctrl-F5) > Select the HTML configuration…
-
You can see I’ve got a few custom generators in my screenshot above. If I want to publish locally (or upload to my company internal server) I choose a JS generator. If I want to publish to Axure Share with javascript support (and “User Scalable: no” which I need for my mobile app prototypes), I use a generator without this injection, and instead use Axure Share’s Plugin feature to do the same thing.
-
If in the future I need to create a prototype with custom javascript, I just import one of my custom generators from a previous project by: File > Import From .RP File > Next > Next > Next > Next > double-click the Import:No on a generator so it reads, “Yes” > Skip to End > Finish.
(Oh, by the way, you can include code samples in your posts by using the Preformatted Text button in the editor header (used to be called “Insert Code” in old forums. That’s what I did above.
charm!