I don't get some of the syntax in this block of code taken from the facebook developers site.
Are the first variables 'js' and 'id' bound in some way? What exactly is being returned in the first if statement?
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
This is the link to the page: http://developers.facebook.com/docs/guides/web/#personalization
What do you mean by "bound"?
They're function-local; js is a variable set in the 3rd and 4th lines, id is set to a string immediately.
The function itself is executed immediately after definition, with d set to document inside the function.
Nothing is returned by the first (and only explicit) return statement. And if this is the only code, a return value would be meaningless, because nothing captures the return value.
Nothing exiting here, just stolen whitespaces :)
(function(d){
var js, // variable (empty)
id = 'facebook-jssdk'; // variable with string 'facebook-jssdk'
if (d.getElementById(id)) { // is there an element with id 'facebook-jssdk'
return; // yes, so we have nothing to do and get out of here
}
js = d.createElement('script'); // create 'script' element
js.id = id; // assign id 'facebook-jssdk'
js.async = true; // load in "background" (if supported)
js.src = "//connect.facebook.net/en_US/all.js"; // set source (with the appropriate protocol; https if called via https, http otherwise)
d.getElementByTagNam('head')[0].appendChild(js); // append to first head element on page
}(document)) // immediately call the anonymous function and hand in the 'document'
Related
I am trying to load a js script dynamically in index.html file using appendChild DOM method. And I am trying to use some functions from that dynamically loaded js in next line itself but I am getting error that the specified function is undefined. I understand that this error is because of async behavior of loading scripts in browser. I also used async flag as false but no use. Below are sample code.
<script>
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.async = false;
js.src = "https://example.com/test.js"; // There are two variants of test.js is there. Will be changing it dynamically based on conditional check.
head.appendChild(js);
</script>
<script>
test(); // Method inside test.js
</script>
I want test.js to be loaded immediately after executing appendChild code part. Please help me on this. Please suggest if there is any other way for my purpose.
Synchronized XHRs are deprecated. You need to add an event listener so you can call your code as soon as the script is loaded. Example below:
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
head.appendChild(js);
js.onload = function() {
console.log("yes", window.$)
};
js.src = "//code.jquery.com/jquery-3.3.1.min.js";
console.log("nope", window.$)
I added js code dynamically:
var head = document.getElementsByTagName("head")[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.id ="jsChange";
js.src = "myRoute.js";
head.appendChild(js);
It works fine, the problem is when I try to remove, I can get the way.
$('#jsChange').remove() //Doesnt work
I also try to add a div in head and put the js inside:
$('#divToJS').append(js);
and:
$('#divToJS').empty(); // doesnt work
How can I do it?
Your empty and remove both need () on the call.
E.G.
$('#jsChange').remove to $('#jsChange').remove();
$('#divToJS').empty to $('#divToJS').empty();
Unless i've misread the question, this should solve your issue.
I've got a script from AWeber, for a popup form, and I want to customize it a little bit..
It currently opens the popup when the page loads. I want it to run as a click event for a button.
The problem is: it uses an immediately-invoked function. And since I'm a newbie and not familiar with this kind of pattern yet, I can't figure it out. I've read about it, but I'm still not completely understanding it.
So, I've tried to rewrite the script to a simple pattern, but it doesn't work!
So, would you please help figuring out what the problem is with my new function?
And/or simplify/explain the other function for me?
The first Function:
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//forms.aweber.com/form/id.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "aweber-wjs-formid")
My attempt (jQuery) :
function createAweberScript() {
var script=document.createElement('script');
script.type='text/javascript';
script.id='aweber-wjs-formid';
script.src='//forms.aweber.com/form/id.js';
jQuery('body').append(script);
}
jQuery(document).ready(function () {
jQuery( 'a.button' ).click(createAweberScript);
});
Just wrap the immediately-invoked function in a regular function, and call that function in the click handler:
function createAweberScript() {
// start Aweber script
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//forms.aweber.com/form/id.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "aweber-wjs-formid"));
// end Aweber script
}
jQuery(document).ready(function () {
jQuery('a.button').click(createAweberScript);
});
You could pick this apart and write your own function, yes, but this is easier to understand and maintain: if the Aweber function ever changes, you just have to replace everything inside your createAweberScript() function to update it.
Note: I got a 404 for http://forms.aweber.com/form/id.js; I'm assuming that's not really the URL you are trying to use. If so, you might want to check it.
I'm using the following code http://friendlybit.com/js/lazy-loading-asyncronous-javascript/ to make async calls but now I want to send custom var to this script and cannot figure it out.
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
Now I want to have custom var that is sent to "script.js". That's all, a simple var to be sent to JS. I've even tried by using query strings but no results.
Help please.
Just assign it to the global scope (with window.varname = value for example) and the script you load will be able to use it, since it runs on the same page.
What do you mean send to script ? Loaded script can access page and all global variables. Just declare global variable and your script can access in regular way.
Is it possible to set the contents of a script element with jQuery? Currently I have:
$(document).ready(function () {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescri...";
$("head").append(s);
});
What if I wanted to replace src property with actual javascript code? Is this possible with jQuery or Javascript?
There's a better way to write that, using $.getScript:
$.getScript("http://somedomain.com/somescri...")
As mentioned, you're looking for eval
eval('x = 2');
alert(x)