Dojo : load cross domain script dynamically and synchronously - javascript

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

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.

Cannot make use of API functions in chrome extension

I am making a chrome extension and I would like to make use of a third party API but I am running into some issues and I've been stuck on this problem for a while...
Problem:
I cannot make use of the functions in the API even though the chrome Dev tool says that the API was loaded successfully.
I've tried to load the API at different times to see if that would make a difference but it doesn't seem to.
I've used the API successfully in a basic web page. But I cannot seem to get it working in the content script of the extension.
Here's the code to load the API:
(function() {
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.src = 'someurl';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scr, s);
})();
Manifest:
"content_security_policy": "script-src 'self' someurl; object-src 'self'"
I've also done the tutorial that Google offers on how to use Google Analytics within an extension because I thought it would be relevant. But no luck. Any guidance would be appreciated.
You are injecting the API into the context of the webpage when you append a script tag; your content script remains isolated from it.
To circumvent that, one possible solution is to also append some of your code, that would then talk to your extension, either through DOM or through external messages

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).

Is there any way to load scripts in Wordpress asynchronously?

I looked through the Wordpress documentation and couldn't find any mention of async javascript loading using wp_enqueue_script(), is it possible at all? I have a couple of scripts and would rather async load them to improve the user loading experience!
You can use wp_enqueue_script() to load a "script loader", which is a script that loads other scripts. That way, you are loading the bootloader synchronously, but the others asynchronously.
Your script-loader could contain this:
var scriptUrls = [URLS_HERE];
scriptUrls.forEach(function(url,index,scriptUrls){
var script = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(script);
script.src = url;
});

Asyncronus javascript rendering widgets

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).

Categories