0

I've created a simple calculator app using HTML, Javascript, JQuery, and CSS. I would like for other people to be able to embedd the calculator app in their own pages - that being said, I created a file called generate.js

The contents of this file are pretty much a bunch of document.write() commands that spit out the HTML code that the calculator is made of. However, I have several external sources that are hosted on my own server (some images, libraries, etc)...

document.write("");
document.write("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\" rel=\"stylesheet\">");
document.write("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->");
document.write("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">");
document.write("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">");
document.write("");

This is what I came up with, but the issue is that this code gets appended to the body, which is bad practice....

I've never done anything like this before - is there an effective/clean way to access the headers of a document and append those lines to it? Am I going about this the completely wrong way?

Also, I purposely do not want to use an iframe for SEO purposes. Any help/pointers are appreciated...

boisterouslobster
  • 1,283
  • 3
  • 25
  • 54
  • 2
    So your calculator requires more than 1MB of data, includes bootstrap twice and by that overrides the bootstrap styles of the page if its using bootstrap aswell. Look at how other plugins, widgets, libraries etc. do it. – LJᛃ Nov 26 '14 at 02:10
  • It's just a little sample piece I was working on to get familiar with the practice - I know it's terrible. Is there a simple example out there that you know of? Thanks for the feedback, though! – boisterouslobster Nov 26 '14 at 02:16
  • 1
    I just did a quick google search for `creating javascript widget` and it turned out [this page](http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/) which looks good to me. Your approach is not wrong per se its just that normally you want to provide **one** condensed, namespaced stylesheet for your widget, that contains only the styles needed. – LJᛃ Nov 26 '14 at 02:22
  • Gotcha - thanks so much. I will definitely go and revisit my work, and try to implement this. If your comment was an answer, I would mark it as the correct one. Have a great day. – boisterouslobster Nov 26 '14 at 02:24
  • http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie#1184960 – Alexis Wilke Nov 26 '14 at 04:27

2 Answers2

0

This simply adds a link element to the head in most latest browsers

var bootstrapCss = document.createElement('link');

bootstrapCss.rel = 'stylesheet';
bootstrapCss.href = 'http://website.com/config/bootstrap.css/';

document.getElementsByTagName('head')[0].appendChild(bootstrapCss);
Calummm
  • 819
  • 1
  • 8
  • 21
0

Try:

$('head').append('<link />');
$('head').append("");
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\"    rel=\"stylesheet\">");
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->");
$('head').append("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">");
$('head').append("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">");
$('head').append("");