Asyncronus javascript rendering widgets - javascript

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

Great article comparing all the different methods :-
http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

Sorry to say that crossdomain xhr is blocked by all browsers. The google analytics google.load() function actually adds script tags to the head element, not use xhr. And the "async" attribute is part of HTML5 and only implemented in Firefox 3.6.
You could use an event listener to dynamically load the script when the document is loaded and add append the widget to a predetermined element(ie. with an id).

Related

Is there a way to enable/disable specific JS script execution for specific websites?

If I have JS script on several different websites, is it possible to enable or disable script execution for specific sites? If this isn't possible, other suggestions for implementation are welcome.
Here's the application:
I have a script tag with my JS source link that site owners can put on their website to enable interaction with my service. However, I would like to be able to enable/disable the service for specific sites so as not to deploy it until they are ready.
note: The script tag also includes site verification information so it gets put on their site before they are ready to deploy. This saves the step of putting in a site verification tag and then going back and putting in the script.
You would want them to put your .ashx handler on your website, then make that return the javascript.
Follow tutorial for ashx page if you are unsure how to http://www.brainbell.com/tutorials/ASP/Generic_Handlers_(ASHX_Files).html
in the processrequest() function:
Check to see if they have it enabled you can use the querystring to see which website it is https://msdn.microsoft.com/en-us/library/system.web.httprequest.querystring(v=vs.110).aspx in the code below there is ?yourwebsitedomain=customersdomain so you would query for "yourwebsitedomain" and you would get "customersdomain"
If they do then Get the bytes of your file using Encoding.UTF8.GetBytes(File.ReadAllText(filename))
and write the results to the output
context.Response.OutputStream.Write(FileBytes, 0, FileBytes.Length);
context.Response.OutputStream.Flush();
Your Customers Website:
<script>
(function() {
var c = document.createElement('script');
c.type = 'text/javascript'; c.async = true;
c.src = "http://yourdomane/yourhandler.ashx?yourwebsitedomain=customersdomain";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(c,s);
})();
</script>
Hope this helps.

How did they hide the JavaScript on this page?

I encountered a webpage that shows a popup, however, the only related JavaScript code I found on that page is the code below. What exactly does this code do and how does it hide the actual implementation (showing the popup)?
<script language="javascript" type="text/javascript">
var script = document.createElement("script");
script.src = "/in.php?referer=" + escape(document.referrer);
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
This code only inject a <script> tag.
When you look in the Chrome dev tools, you'll see the file referenced here in the sources tab.
This javascript file will have this name: "/in.php?referer=" (and document.referrer as value to the query string).
There's really nothing hidden, it's just that this way the javascript file is loaded asynchronously and won't block further script from loading/executing. This technique is often used by third party in order to leave the smallest footprint possible (google maps, twitter, facebook SDK, youtube, etc, etc).

Dojo : load cross domain script dynamically and synchronously

I'm working on a project where i have to use dojo (i'm doing a custom widget) and the google map api (v3)
For some technical reason, i have to include the google map api through my js file and not through my html file, so i can't use
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places'></script>
The load have to be done synchronously.
I've tried some things, first adding the script using
document.write("<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places'></script>");
But that's not working, i get a blank page instead, using firebug i can see that the panel "Network" is clearing and the page make an infinite loading of google map api script.
I think i can't do it using dojo.io.script (which allow to make cross domain request), because we can't make synchronous request with dojo.io.script
Any help will be appreciated ;)
Well, solution was to use google map callback :
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&callback=mapLoaded";
document.body.appendChild(script);
Then make the function "mapLoaded" which execute the code
Thanks for those who taked time to answer me
You should still be able to use dojo.io.script. It does not have to be synchronous. The maps API takes a c

Using Javascript to grab element on remote page

I would like to grab an element from a remote HTML page. As I am requesting data from a different domain I am using the below code to add the source as a script. Yes, very dodgy.
<script type="text/javascript">
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://remoteDomain.com/page.html');
document.getElementsByTagName('head')[0].appendChild(script);
</script>
The above code fetches and appends the entire page to my document head. Seems to work okay. However now I would like to able to grab an element by ID, or even regex from this source.
Can this be done?
I am aware that the above code is dirty, so I'd be happy to receive any suggestions to clean it up!
Indeed very dodgy... But there are crossdomain AJAX tehniques that you can use. Some help here: http://usejquery.com/posts/9/the-jquery-cross-domain-ajax-guide
The above code fetches and appends the entire page to my document head.
It doesn't really, it just creates a script element of which its src points there.
It looks like you are trying to get around Same Origin Policy.
Can you use a server side proxy?
Browsers go to great lengths to prevent this being done client-side unless the site you're trying to read explicitly opts in.
Otherwise any random web page you visit could read info from your bank account, say.

How javascript gets someother website data?

Well i am a bit confused..
I saw a service known as Zopim.. What they do is they provide you with a small piece of code:
such as
<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
document.write(unescape("%3Cscript src=\'" + document.location.protocol +
"//zopim.com/?zopim\' type=\'text/javascript\'%3E%3C/script%3E"));
</script>
<!-- End of Zopim Live Chat Script -->
you just need to place it in the footer and ur done..
Can any body let me know how this works and from where i can learn this..
+
how can they even set the CSS with this and also the looks?
Awaiting for your replies...
Thanks
That code is creating a reference to a Javascript script hosted on their server. That reference on your page allows that script to access all the elements on your page (including their styles) through the DOM (Document Object Model) and to change them. All of this takes place in the user's browser.
Edit: Here's an example. Say I have a script on my site at http://www.mysite.com/myscript.js that does this:
document.body.style.backgroundColor = "#00FFFF"
Then you put this on your page:
<script type="text/Javascript">
document.write("<script src='" + document.location.protocol + "://www.mysite.com/myscript.js'></script>");
</script>
Then when a user loads your page, and the user's browser gets to that code, it will write out a script tag that references my script. It will then process that script tag, which basically downloads my script (to the user's browser) and runs it on your page (which is already on the user's browser). My script, in turn, changes the background color of the document (your page, running on the user's browser), because it acts like it was part of your page all along.
By the way, the reason you're using document.write instead of just linking directly to my script is so that if your page uses SSL, so will the link, so the user won't get any annoying messages that my script isn't secure.
This code creates a <script> tag that loads a script from http(s)://zopim.com/?zopim.
The generated <script> tag is a regular Javascript script that can do whatever it wants to.

Categories