I have read a lot of topics and tried a lot of stuff but I can't get what I want.
I just moved my js code at the end of the page and now I get some errors.
This is how my page looks like:
<html>
<head>
bla bla
</head>
<body>
bla bla
<div class="advertising">
<script type="text/javascript" defer="defer">
window.onload = adsense();
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script language="javascript" type="text/javascript" src="fonctions.js"></script>
</body>
</html>
In fonctions.js I have my google adsense code:
function adsense(){
<!--
google_ad_client = "pub-xxxxx";
/* 120x600, date de création 11/06/11 */
google_ad_slot = "xxxxx";
google_ad_width = 120;
google_ad_height = 600;
//-->
}
The idea was to have the same code for adsense at only one place but I can't get it to load after the file fonctions.js
I tried defer="defer", window.onload ...
Any ideas?
Thanks
I get this error in Firebug:
Error : adsense is not defined
PS: I would like to avoid to use Jquery (to avoid making pages too big)
UPDATE:
<script type="text/javascript" defer="defer">
(function() { // 'sandbox' javascript pattern to prevent clobbering
// global namespace
var executeProxy = function() {
if (typeof adsense === 'function') { // adsense is configured
adsense();
} else { // adsense is not configured;
// therefore, try again later
setTimeout(executeProxy, 50);
}
};
executeProxy();
}());
</script>
<script language="javascript" type="text/javascript" src="fonctions.js"></script>
in fonctions.js if I put the following code, the "ok" is displayed:
function adsense(){
alert ("ok");
}
However if I have this code, the ad is not displayed:
function adsense(){
google_ad_client = "pub-xx";
/* 120x600, date de création 16/04/11 */
google_ad_slot = "xxx";
google_ad_width = 120;
google_ad_height = 600;
}
My guess is that it's a Google issue... The code cannot be loaded in this way...?
If I put the adsense code in the page (below the call - where you do alert('here'); ) it is well displayed... So my adsense code is correct
UPDATE:
I have finally changed the solution, I've put the code in a .html file and I include it using php. So it's not in my js file anymore.
Thanks for your help anyway.
window.onload expects a function callback; however, you are executing adsense with adsense(), and adsense doesn't return a function; therefore, window.onload will discard that. Change to:
window.onload = adsense;
UPDATE
The above answer should be discarded, but I'm leaving it up so that people can know that window.onload expects a function callback :)
Keep in mind that defer on the script element will instruct the browser to wait until the page has been loaded to execute the script; however, your fonctions.js is in the src attribute of your last script tag; therefore, your deferred script will most likely execute before adsense has been defined, because the browser will make an http request to retrieve your script. This will allow deferred scripts to continue executing while adsense is not defined. Try this in place of your original deferred script:
<script type="text/javascript" defer="defer">
(function() { // 'sandbox' javascript pattern to prevent clobbering
// global namespace
var executeProxy = function() {
if (typeof adsense === 'function') { // adsense is configured
adsense();
} else { // adsense is not configured;
// therefore, try again later
setTimeout(executeProxy, 50);
}
};
executeProxy();
}());
</script>
UPDATE
I forgot that script defer is not supported in anything outside of IE. Therefore, the deferring issue should not be at play here; however, I tested the following code in FF and Chrome, and it works:
<script type="text/javascript" defer="defer">
(function() { // 'sandbox' javascript pattern to prevent clobbering
// global namespace
var executeProxy = function() {
if (typeof adsense === 'function') { // adsense is configured
adsense();
} else { // adsense is not configured;
// therefore, try again later
setTimeout(executeProxy, 50);
}
};
executeProxy();
}());
</script>
<script type="text/javascript">
function adsense() {
alert('here');
}
</script>
window.onload = adsense(); calls adsense() immediately and assigns its return value to onload.
Related
I am trying to write a script in Javascript that enables or disables other scripts based on the value of a cookie. I'll figure out how to set the cookie separately so I am just hardcoding for the moment.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./script.js"></script>
<script class="GA" src="./scriptga.js"></script>
</body>
</html>
script.js (pseudo code as I dont know what way to do it):
var mycookie = 1
// enable script
if (mycookie=1) {
enable script with class="GA";
console.log("script enabled");
}
// disable script
else if (mycookie=2) {
disable script with class="GA";
console.log("script disabled");
}
// disable script
else {
disable script with class="GA";
console.log("script disabled");
}
scriptga.js:
console.log("script loaded");
Any help would be greatly appreciated as I have been at this for nearly 6 months on and off with no joy.
I dont mind adding jquery or some other too to achieve this.
Assuming you can modify those scripts (Not loaded from external source)
And both will be loaded anyway but you can execute piece of code or not.
And take in mind that JS will be executed line by line & left to right so take care of undefined variables.
#1 Using Variables
As you can pass global variable from script.js to scriptga.js.
Define enableGA as boolean variable.
script.js:
var mycookie = 1
// assume that you don't want to execute 'scriptga.js' by default
var enableGA = false;
// enable script
if (mycookie == 1) {
enableGA = true;
console.log("script will be executed");
}
Check enableGA is true or not.
scriptga.js:
if(enableGA){
console.log("script executed");
}
#2 Using Functions
script.js:
var mycookie = 1
// assume that you don't want to execute 'scriptga.js' by default
var enableGA = false;
// enable script
if (mycookie == 1) {
console.log("script will be executed");
enableGA(); // call function
}
scriptga.js:
function enableGA(){
console.log("script executed");
}
It is possible to disable the script by setting it's type to type="text/plain". Now setting it back to text/javascript will not run it. You need to clone the script element and insert it again.
Then:
<script type="text/plain" data-consent="ad_storage" src="js/analytics.js"></script>
<script type="text/javascript">
function enableScripts() {
$("script[data-consent='ad_storage'][type='text/plain']").each(function(){
$clone = $(this).clone();
$clone.attr("type", "text/javascript").insertAfter(this);
$(this).remove();
});
}
</script>
I know this has been covered extensively as separate issues; I've tried copying verified answers, but I'm having trouble homologating Javascript conditional statements and a link URL change.
Essentially, what I need to do is detect mobile users and change a conference call URL to a tel link. I've been using if (screen.width <=699) { as the condition and it works on redirects. Here's what I've tried:
<script type="text/javascript">
<!--
var call=document.getElementByID('phone');
if (screen.width <= 699) {
call.write('<a href="tel:!PHONENUMBER!">');
else
call.write('<a href="!URL!" target="blank">);
}
//--!>
</script>
</head><body>
...
...
I've also tried these with corresponding else statements to no avail:
no var and document.getElementByID('phone').write
onclick = function() { window.location.href ='tel:!PHONENUMBER!};.
call.src.replace('tel:!PHONENUMBER!');
call.setAttribute("href",'tel:!PHONENUMBER!');
I apologize if this is a super basic issue - I'm still learning Javascript. Thank you in advance.
Will
You need to either wait for the page to finish loading before you execute your JavaScript or move your script block to the bottom of the HTML.
If you want to wait for the page to finish loading, then wrap your code in the following:
window.onload = function () {
// your code goes here
}
Figured it out with help from #sepbot.
<body onload="mobileURL()">
<div id="phone"></div>
<script type="text/javascript">
function mobileURL() {
var a = document.createElement("a");
a.innerHTML="!LINKTEXT!";
var myPhone = document.getElementById('phone');
if (screen.width <= 699) {
a.setAttribute('href', '!TELEPHONE!');
myPhone.appendChild(a);
} else {
a.setAttribute('href', '!URL!');
myPhone.appendChild(a);
}
}
</script>
I have the below code is working as long as I load the employee section and its scripts as part of the index.html
index.html Working Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Employee Details loaded as usual and sript is executing able to see alert</h1>
</body>
</html>
Script.js
var empModule = (function (empModule) {
var Years = null;
$(document).ready(function () {
var empdata = { Name: 'Billa' }
var myVM = new empModule.viewModel(empdata);
});
empModule.viewModel = function (data) {
var that = this;
that.Name = data.Name;
alert(that.Name);
};
return {
empModule: empModule
}
} (empModule || {}));
Error Scenario:
We decide to move employee related section based on some condition. Hence we are loading this section and section related script(emp.js) via Ajax. But now it is throwing the error empModule.viewModel is not a constructor. Why is it so?
If I move the document.ready section at the bottom like the below order, it is working
Emp.js(moved from script.js to emp.js and load via ajax(
var empModule = (function (empModule) {
var Years = null;
// Code not working when we load this script file using Ajax.
// But works if we move this document.ready at bottom
//$(document).ready(function () {
// var empdata = { Name: 'Billa' }
// var myVM = new empModule.viewModel(empdata);
//});
empModule.viewModel = function (data) {
var that = this;
that.Name = data.Name;
alert(that.Name);
};
//Working only if I keep the ready section here
$(document).ready(function () {
var empdata = { Name: 'Billa' }
var myVM = new empModule.viewModel(empdata);
});
return {
empModule: empModule
}
} (empModule || {}));
The function empModule will get executed automatically as it is self
executing function. When it is executing it needs to prepare a
empModule.viewModel object, but failed to do that when viewModel
definition is located after document.ready (caller). This happens only
when I load this script via Ajax, but works if I pre load it in a page
This is because in the first example the script.js is part of the document and therefore the document.ready waits for that .js file to be loaded before trying to call empModule.viewModel().
In the second example, your script is loaded asyncronously, but the page is not taking this into account. So the page loads (without the script.js) and then you load the script.
At this point, the document is ready (as the ajax loaded script isn't part of the document) so the empModule.viewModel() call fires straight away, before the rest of the script (which is the bit that defines the function) and you get your error.
Just like #dougajmcdonald said is your issue, but your solution is, instead of loadding by AJAX, just insert the script tag in your document:
// Instead of $.ajax(... /myScript.js) use:
function loadMyScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'myScript.js';
script.onload = function() {
empModule.doSomething(); // or callback
};
}
I'm still learning by making my own loader; here's my progress:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
(function( $ ){
$.plugin = {
loadJS: function(src, onload, onerror){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
script.onload = onload;
script.onerror = onerror;
script.onreadystatechange = function () {
var state = this.readyState;
if (state === 'loaded' || state === 'complete') {
script.onreadystatechange = null;
onload();
}
};
document.body.appendChild(script);
},
loader: function(o) {
var loaded = ({js:[],css:[]});
// http://www.crockford.com/javascript/private.html
var that = this;
var phase = 0;
$.each(o["js"], function(key,src) {
that.loadJS(src,
function(){
loaded['js'].push(src);
});
});
console.log(loaded['js'].length)
// IF JS ALL LOADED, this is the main problem
if (loaded['js'].length == o["js"].length) {
alert('problem solved')
that.loadJS(o["script"]);
};
}
};
})( jQuery );
</script>
</head>
<body>
<script>
$(document).ready(function() {
$.plugin.loader({
js: [
'1.js', // async
'2.js', // async
'3.js', // async
'4.js' // async
],
script: '5.js', // after js loaded
debug: 1
});
});
</script>
</body>
</html>
the problem is i still dont get how stuff work in js. above the same it will load my js randomly as its async* assuming its all alert('this is x.js loaded') inside the 1-5.js
something like
// check goes randomly here
1.js or 1 js loaded
3.js 2 js loaded
2.js 3 js loaded
4.js 4 js loaded
// it should be here
so the logic is when my all js is load if (loaded['js'].length == o["js"].length) {alert('problem solved')}; should work. but it doent attach to the event somehow.
How can we check if all my js is loaded?
Looks like your check to see if they are all loaded is being run at the end of the loader function, so it will run immediately the async calls have been started. You need to move that check part into the the callback function thats passed to the .each function.
I ran into problems under IE 6 with a large JavaScript heavy app where occasionally external script loading was aborted without any discernable network trouble, so I ended up doing
<script src="sourcefile-1.js"></script>
...
<script src="sourcefile-n.js"></script>
<script src="last-loaded.js"></script>
<body onload="if(!window.allLoaded){/*reload*/}">...</body>
where last-loaded.js just did
window.allLoaded = true;
and where the reload code would redirect to an error page if a reload hadn't fixed the problem after a few tries.
This isn't the dynamic loader problem, but a similar approach should work with a dynamic loader as long as you can identify a point after which all external code should have loaded and you can run a very simple inlined script at that point.
I need to call one of two JavaScripts depending on a condition, like so:
<script type="text/javascript">
if(b_condition)
<script type="text/javascript" src="http://script1.js"></script>
else
<script type="text/javascript" src="http://script2.js"></script>
</script>
But this doesnt work. Any ideas how to call another JavaScript call in an If/Else block?
What the hell? Why on earth is everyone here advocating document.write()? Fairly certain we've moved beyond this as standard practice by this point; document.write isn't even valid if you're in an XHTML setting.
The best way to do this would be something like the following (also here, for better highlighting/parsing: https://gist.github.com/767131):
/* Since script loading is dynamic/async, we take
a callback function with our loadScript call
that executes once the script is done downloading/parsing
on the page.
*/
var loadScript = function(src, callbackfn) {
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.setAttribute("async", "true");
newScript.setAttribute("src", src);
if(newScript.readyState) {
newScript.onreadystatechange = function() {
if(/loaded|complete/.test(newScript.readyState)) callbackfn();
}
} else {
newScript.addEventListener("load", callbackfn, false);
}
document.documentElement.firstChild.appendChild(newScript);
}
if(a) {
loadScript("lulz.js", function() { ... });
} else {
loadScript("other_lulz.js", function() { ... });
}
If you have jQuery or a similar library on the page, you can jack out my loadScript function and insert their appropriate function (ala $.getScript, etc).
You could do something like this:
var file=document.createElement('script')
file.setAttribute("type","text/javascript")
file.setAttribute("src", "script1.js")
Forgot to add that you need to then append this into an element on the page:
document.getElementsByTagName("head")[0].appendChild(file)
I used this and it works well:
<script type="text/javascript">
if(b_condition)
document.write('<scri'+'pt src="http://script1.js"></'+'script>');
else
document.write('<scri'+'pt src="http://scripts2.js"></'+'script>');
</script>
I see that document.write is not the best practice to use though, but it works. Any ideas better than this? I don't want to write so much code for something so simple.
<script type="text/javascript">
if(condition==true)
{
var src = "js/testing_true.js";
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.setAttribute("async", "true");
newScript.setAttribute("src", src);
document.body.appendChild(newScript);
}else
{
var src = "js/testing_false.js";
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.setAttribute("async", "true");
newScript.setAttribute("src", src);
document.body.appendChild(newScript);
}
</script>
If the scripts are not huge and/or there is no other reason why not both should be loaded, I would do something like:
<script type="text/javascript" src="http://script1+2.js"></script>
<script type="text/javascript">
if(b_condition) {
functionA();
}
else {
functionB();
}
</script>
You need to either emit the desired script block in your condition, or create the script tag using the DOM and insert it. http://ajaxpatterns.org/On-Demand_Javascript
Those files script1.js and script2.js are your, or are u including them from another domain?
because if they are yours your can include both, and depends of your condition you can call functions inside the files..
This is usually a bad idea so I recommend that you tell us what you actually need to do so we can find a better solution for you. In general you would like to combine and minify all javascript needed on the page so the user only has to load it once.
If there is no other way than you can do it like this:
<script type="text/javascript">
var script = document.createElement('script');
if((b_condition){
script.src = 'script1.js';
}else{
script.src = 'script1.js';
}
document.body.appendChild(script);
</script>
<script type="text/javascript">
if(b_condition)
document.write('<script type="text/javascript" src="http://script1.js"></script>');
else
document.write('<script type="text/javascript" src="http://script2.js"></script>');
</script>
<?php if (a_condition) {?>
put html code here or script or whatever you like
<?php } elseif(b_condition) {?>
put any other code here
<?php } else {?>
put even more code
<?php } ?>