Hey all,
I'm creating a javascript widget so third partys (web designers) can post a link on their website and it will render
the widget on their site. Currently, I'm doing this with just a script link tag:
<div class="some_random_div_in_html_body">
<script type='text/javascript' src='http://remotehost.com/link/to/widget.js'></script>
</div>
However, this has
the side-effect of slowing down a thrid party's website render times of
the page if my site is under a load. Therefore, I'd like
the third party website to request
the widget link from my site asyncronously and then render it on their site when
the widget link loads completely.
The Google Analytics javascript snippet seems to have a nice bit of asyncronous code that does a nice async request to model off of, but I'm wondering if I can modify it so that it will render content on
the third party's site.
Using
the example below, I want
the content of http://mysite.com/link/to/widget.js to render something in
the "message" id field.
<HTML>
<HEAD><TITLE>Third Party Site</TITLE><STYLE>#message { background-color: #eee; } </STYLE></HEAD>
<BODY>
<div id="message">asdf</div>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'http://mysite.com/link/to/widget.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</BODY>
</HTML>
I don't know if what I'm trying to do constitutes Cross Site Scripting (still a bit vague on that concept) but am wondering if what I'm trying to do is possible. Or if anyone has any other approaches to creating javascript widgets effectively, I'd appreciate any advice.
Thanks for reading this.
Joe
