up vote 0 down vote favorite

I am trying to create a Javascript file that I can reference from other domains that will allow the look and feel of a user's page to be changed.

For example, The javascript file (www.mywebsite.com/123.js) would be referenced on www.userwebsite.com and could contain the below:

var thebody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
var txtNode = document.createTextNode("Hello. This is a new node.");   
var divIdName = "mydiv";
var csslink = "http://www.anotherwebsite.com/style.css";
var newcss = document.createElement('link');
newcss.setAttribute('href',csslink);
newcss.setAttribute('rel','stylesheet');
newcss.setAttribute('type','text/css');
newdiv.setAttribute('id',divIdName);
newdiv.appendChild(txtNode);
thebody.appendChild(newdiv);
thebody.appendChild(newcss);

Which would insert a reference to a CSS file hosted on the user's website as well as add a new div to the DOM with the text node "Hello. This is a new node."

I want the user to be able to login to a CMS (that I will build) so they can change the text that gets printed to the page without having to change the Javascript file that I give to them. The CMS would be hosted on my website.

What is the best practice to do this?

Obviously I could edit the javascript file remotely without the user needing to change anything - but is that the best method of updating the script?

I was thinking of having an Ajax request in the javascript that retrieves output from a php file referencing a mysql database with the text the user wants to change to - however, the same origin policy means that isn't possible.

Thanks

share|improve this question
Just as a note, you can use jsonp to get around the same origin policy issue. – Josh Mein Sep 3 '12 at 21:27
Thanks Josh - seen a lot of people mentioning that and I will look into it – tensai288 Sep 3 '12 at 21:37

1 Answer

up vote 0 down vote accepted

You don't need to use AJAX to retrieve the PHP output; get the clients to add a <script /> tag to their pages with the src attribute set to your PHP output; just make sure your script emits valid JavaScript.

As your web server now thinks it's in PHP land rather than JS assets, be sure to emit correct page headers; MIME type and expires spring to mind.

header('Content-Type: application/x-javascript');
header('Last-Modified: Mon, 03 Sep 2012 22:33:44 GMT');

Furthermore, be aware of the un-reliable, and "hostile" environment your script will be executing in. You should minimize the amount of global variables your JavaScript script declares to mitigate the risks of collisions. The easiest way to do this is to wrap your code in an IIFE;

// Look ma, no global variables!
(function () {

var thebody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
var txtNode = document.createTextNode("Hello. This is a new node.");   
var divIdName = "mydiv";
var csslink = "http://www.anotherwebsite.com/style.css";
var newcss = document.createElement('link');
newcss.setAttribute('href',csslink);
newcss.setAttribute('rel','stylesheet');
newcss.setAttribute('type','text/css');
newdiv.setAttribute('id',divIdName);
newdiv.appendChild(txtNode);
thebody.appendChild(newdiv);
thebody.appendChild(newcss);

}());

You should also consider prefixing your CSS classes, element ID's etc to minimize collisions with the hosts naming schemes.

share|improve this answer
Thanks for your quick response Matt. Just to confirm - you're suggesting using my htaccess file to process the .js as PHP? but then use headers to ensure the javascript is processed? FYI I don't want the clients to see .php in the line of script (it would need to be .js) – tensai288 Sep 3 '12 at 21:31
@tensai288: You can either use your .htaccess to make your foo.js file be processed by PHP, or you can just set the src attribute of the <script /> file to foo.php directly; browser's don't care what extension the src is set to, as long as it gives them valid JavaScript. – Matt Sep 3 '12 at 21:34
Thanks Matt - makes sense to me. I wonder if the .htaccess approach is what tech companies like optimizely / visual website optimizer use. They provide one line of javascript that never needs to be changed, but the user can edit all the settings from a cms – tensai288 Sep 3 '12 at 21:36
@tensai288: They'll definitely do either exactly that, or something very similar! – Matt Sep 3 '12 at 21:39

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.