Loading Stylesheets in an embeddable javascript code.

Question

So I built a widget that embeds into my clients website with some JS. The code that's being rendered requires some css so it looks and functions properly on the website. How should I go about including thse stylesheet and have it work with the code inside the javascript?

<div id="widget"></div>
<script type="text/javascript">
  (function() {
    var sp = document.createElement('script'); sp.type = 'text/javascript'; sp.async = true;
    sp.src = 'http://example.com/widget/widget.js?key=248572180ede986058ede3519a25665e&r='+(new Date().getTime());
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sp, s);
  })();
</script>

Go with a style tag instead of a link if you have a few styles. — zer00ne
– zer00ne, Commented Nov 27, 2016 at 2:07

monssef · Accepted Answer · 2016-11-26 21:42:48Z

1

here's a way you can add a stylesheet to your head tag:

head = document.head || document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = ""; // css link goes here
head.appendChild(link);

or you can create a style tag:

var css = ''; //put your css in here
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
   style.styleSheet.cssText = css;
} else {
   style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

answered Nov 26, 2016 at 21:42

monssef

1,00411 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading Stylesheets in an embeddable javascript code.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related