IO not defined in file but is defined in console - javascript

I feel really stupid for asking this but I'm trying to load in some extra functionality and in the process making use of an injected JS file. This injected file looks like this:
(function() {
var script = document.createElement("script")
script.type = "text/javascript";
script.onload = function () {
setTimeout(function() {
console.log(io);
var socket = io.connect('https://localhost:1200');
socket.emit('test', 'test');
}, 5000);
};
script.src = 'https://localhost:1200/socket.io/socket.io.js';
document.getElementsByTagName("head")[0].appendChild(script);
})();
When I refresh my page and take a look at the console the only error message I see is this: Uncaught ReferenceError: io is not defined which is strange because when I execute this piece of code:
console.log(io);
var socket = io.connect('https://localhost:1200');
socket.emit('test', 'test');
in the console of Chrome, it just works. Can somebody point out to me what I am doing wrong because I'm starting to really pull my hair out at this point.

Related

Inject script programatically results in error 500 (LinkedIn follower plugin)

I want to insert the LinkedIn Follow Company Plugin, but only inject it, if the user has given consent.
So instead of putting in the script tags directly, I have a banner, asking for consent and if the checkbox is checked the following function runs:
function injectLinkedin() {
var linkedin_container = document.querySelector('#linkedin-follow-plugin');
var script = document.createElement("script");
script.setAttribute("src", "https://platform.linkedin.com/in.js");
script.setAttribute("type", "text/javascript");
script.setAttribute("async", "false");
script.textContent = 'lang: de_DE';
script.onload = function(){
console.log('li');
};
linkedin_container.appendChild(script);
var script2 = document.createElement("script");
script2.type = "IN/FollowCompany";
script2.setAttribute('data-id' , '1234');
script2.setAttribute('data-counter' , 'bottom');
script2.onload = function(){
console.log('li2');
};
linkedin_container.appendChild(script2);
}
But that way LinkedIn responds with an error 500 for https://platform.linkedin.com/in.js
Don't see why/how linkedin can see how the code gets loaded. Putting in the script tags directly it works fine. And, strangely, this error is not on my local machine but only on the live server.

Javascript: best way to wait for script loaded synchonously before executing function?

I have the following problem:
I load a page inside a modal dialog. This page uses jQuery as dependency. Since I already use jQuery on the main page, for me, it is always available. Now we have the usecase, that also different pages (hosted on different domains) need to load that page if necessary.
So, I check if the jQuery variable exists on this page and if yes, just go on with my code.
If it does not exist, on top of the template, I dynamically create a script element like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
And at the end of the template, I use a IIFE (to scope the jquery variable)
(function ($) {
.... code ....
})(jQuery);
However, since with this method, the script gets loaded asynchronously, sometimes I get the error: jQuery is undefined.
Now I came up by loading it synchronously, like this:
var xhrObj = new XMLHttpRequest();
// open and send a synchronous request
xhrObj.open('GET', "jquery.min.js", false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementById('placeholder').appendChild(se);
This works fine, but the warning "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. to the end user's experience." made me think.
However, now I changed my code and just said
if (!window.jQuery) {
document.write('<scr' + 'ipt src="jquery.js"' + '>' + '</scr' + 'ipt>');
}
on top of my Template.
Dear javascript gurus, is this a reliable solution?
Use the onload attribute in async javascript
<script async src="siteScript.js" onload="window.MyInitialisation()"></script>
In javascript it would look like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.async = "async";
script.defer = "defer";
script.onload = function() {window.MyInitialisation()}
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

HTML/JavaScript Script Injection Exception

I tried to write a bookmarklet which depends on another script. For this my bookmarklet includes a function like this:
function load(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false;
script.onload = callback;
document.head.appendChild(script);
}
The callback function is called on most pages, but on some pages I get the following exception in the console and the script is not loaded (facebook.com is one example).
Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)
An example of a bookmarklet:
javascript:function%20load(url,callback){var%20script=document.createElement('script');script.type='text/javascript';script.src=url;script.onload=callback;document.head.appendChild(script);}load('http://code.jquery.com/jquery-1.11.1.min.js',function(){console.log('Loaded');})
I use FireFox 29 on Ubuntu 12.04. If it is executed a "Loaded" should a appear in the console. On the first load an additional access to the resource is visible in the console. But as written above on e.g. facebook.com nothing happens at all. Neither is the script loaded nor is the callback called.
It was quite likely due to XSS from the bookmarklet itself. FF 35.0 doesn't have an error anymore and shows a well formatted message.

phonegap - dynamically adding javascript

Developing phonegap application which loads google map. Using below two javascript for google map. One javascript is loaded from locally while other javascript loaded from server.
var script = document.createElement('script');
script.src = 'http://maps.google.com/maps/api/js?sensor=true';
script.type = 'text/javascript';
document.head.appendChild(script);
script.onload = function () {
var script1 = document.createElement('script');
script1.src = 'js/jquery.ui.map.js';
script1.type = 'text/javascript';
document.head.appendChild(script1);
script1.onload = function () {
alert(google.maps.LatLng);
}
};
Both javascripts should be loaded after html page is loaded. Tried below code and referred various blogs, but its not working.
If same scripts written in header tag of html page, then it working perfectly. but in my application i need it to be loaded dynamically.
Please help....
Solved:
var doc_write = document.write; // Remember original method;
document.write = function(s) {$(s).appendTo('body')};
$.getScript('http://maps.google.com/maps/api/js?sensor=true').done(function()
{
$.getScript('js/jquery.ui.map.js').done(function()
{
document.write = doc_write; // Restore method
setTimeout(function()
{
alert(google.maps.LatLng);
},1000);
})
.fail(function(jqxhr, settings, exception)
{
alert(exception); // this gets shown
document.write = doc_write; // Restore method
});
}).fail(function()
{
alert('failed to load google maps');
});
Problem:
It takes some time to initialise.
Call your javascript function after device get ready function. Because if you are using phone gap through Xcode, the device get ready function take some time to load and your script is called before it.
Don't do it in this way
Load it in footer section of your application

Loading addthis via async plugin

I would like to get this file in the dom without using a dumb script tag. However It's timing out.
require(["async!http://s7.addthis.com/js/300/addthis_widget.js"], function(addthis){
});
Here's the console error:
Uncaught Error: Load timeout for modules: async!http://s7.addthis.com/js/300/addthis_widget.js_unnormalized2,async!http://s7.addthis.com/js/300/addthis_widget.js
http://requirejs.org/docs/errors.html#timeout
I'm not familiar with requirejs (just starting to look into it tonight!), but you could do it this way:
var jsAddThis = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
jsAddThis.async = true;
jsAddThis.type = 'text/javascript';
jsAddThis.src = 'http://s7.addthis.com/js/300/addthis_widget.js';
head.appendChild(jsAddThis);

Categories