On a website I'm working on, I need to load a tracking script 10 seconds after the page loads. I found a snippet to do so, but I've hit a snag. After waiting 10 seconds, the page goes white. The URL doesn't seem to change, but the page is no longer visible and the throbber starts spinning.
Here's what I'm using to load the script:
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
//
// Tracker options go here...
//
setTimeout(function(){
$importNoCache("http://tracking.code/url");
}, 10 * 1000);
Is there a better way to do this?
EDIT: I stepped through the code in Firebug, and the scripts works like it should. With Firebug's debugger off, it blanks the page as I described above.
This would happen if the script calls document.write.
Can you show us the script that you're loading?
The code looks fine, so the problem is probably in the tracking code. If it contains a document.write() call, it will work fine when included normally, but wipe out the page when included after the page has finished loading.
Edit:
Yep, the tracking script does d=document, then calls d.write() later on... you won't be able to include this script after the page has finished loading.
Related
Javascript & Jquery loads fine on incognito, on hard refresh(CTR+shift+R) or on clearing the browser cache.
But it doesn't load on normal page refresh or ctrl+R.
i have written the functions separately and calling them on page load with :
window.onload = function() {
adddata();
adddata_pages();
adddata_views7();
adddata_pages7();
adddata_views1();
adddata_pages1();
};
Please help me, Stuck with this for long time.
I have a page that displays some status information. This page runs on a PC without any user input and needs to refresh each few minutes.
I can get it to refresh with the meta tag but this seems crude. It forces the refresh of all the assets and causes that ugly flicker. Turbolinks does a nice job everywhere else with smarter page loading. Can I get this to work with an automatic refresh?
I'd appreciate any advice on how I can make this work better.
Here is what I recently used under Turbolinks 5. Had to add some variables to stop it from reloading once the user browsed away from the page, etc.
<script>
if(!window.reloadTimer) {
var SECONDS = 30;
window.reloadTimer=setTimeout(function(){
console.log("Reload!");
window.reloadTimer=undefined;
Turbolinks.visit(location.toString(),{action: "replace"});
}, SECONDS * 1000);
document.addEventListener("turbolinks:visit",function() {clearTimeout(window.reloadTimer);window.reloadTimer=undefined;});
}
</script>
Try this:
$(document).on('ready page:load', function() {
var SECONDS = 5;
setTimeout(function(){
Turbolinks.enableTransitionCache(true);
Turbolinks.visit(location.toString());
Turbolinks.enableTransitionCache(false);
}, SECONDS * 5);
});
I need a javascript code which loads an image into browser cache. What is the usage? read this:
When the user logs into my site, she/he gets redirected to a page which is "Redirecting you to control panel" and a progress is displayed there too. Now, this "redirector" page has a background, since user experience this page and sees it only 3 seconds, many times, background image is missed and there remains no chance for it to be loaded, since from the page load till the page redirection there is only 3 seconds gap. Here is en example of my ajax login:
$.ajax({
// do ajax stuff
success : function(msg)
{
if(msg==true)
{
// I NEED A FUNCTION HERE TO LOAD THEM IMAGE INTO CACHE BEFORE THIS PAGE
// TO LOAD THE REDIRECTOR PAGE. USING THIS, I CAN ENSURE THE EXISTENCE OF THE
// BG IMAGE WHEN THE USER SEES NEXT PAGE. THIS BG IMAGE IS INDEED NEXT PAGE'S BG
window.locatio.href = 'process/redirection/to/user-panel';
}
}
});
This function will work:
function preloadImage(url)
{
var img = new Image();
img.src = "/test/example.jpg";
}
Also, here is a question that discusses something similar, pre-loading images on a splash screen, but the implementation is far more complex.
On the subject, if you don't have to use JavaScript, another solution using CSS and XHTML that could probably work on the redirect page can be found here. Otherwise, the code at the top should work. Hope this helps, good luck.
I need to trigger a piece of code after every single bits are done downloading. The script works if injected after everything is loaded, but how do I trigger that automaticly?
My script is:
var divId = "jwplayer-0_wrapper";
if ($('#' + divId).length == 1) {
myReg = /https?:\/\/www\.youtube\.com\/watch\?v=[^"]+/;
var plainText = $('#' + divId).parent().children('script').text();
var url = plainText.match(myReg);
if (url !== null) {
window.location = url;
};
};
It is used to skip certain site that decide to use the JW player witch I find horribly buggy. So it looks for a div with the indication of the JW player and if there's one, it finds the link to the original youtube video and directly goes there.
Its triggered By Google Chrome Add-on named Javascript Injector and I apply the script on every page I visit. The plug in work perfectly well on sites like www.ayoye.co and www.veuxturire.com. But on other sites, that uses the same pathern, it seems that the script is triggerd too early. For example there www.mondedestars.com and www.lesautos.ca triggers it too early.
If I use the "inject now" fonction of the Add on after the page is really done loading, then it redirects me to the youtube page as expected. I am lost on the why it works some where and not were else.
I'm not trying to understand every single website here, I'd prefer make it dynamicly triggered after the page has done loading everything from its php, ajax, script, flash, html and CSS.
I've tryed to look to the JWplayer API, but since its terribly unclear to me, over the fact that its partialy in flash, it woudl be simpler if there was a way to trigger it after, or maybe just triggering it after i hover over the body, since every sites has a body. It cant be specific to one page.
Use something like this
var timer;
function injectYouTube() {
// DO YOUR STUFF HERE
// ONCE DONE CALL clearInterval(timer);
clearInterval(timer);
}
timer = setInterval(injectYouTube, 2000);
I am not saying this will be called after everything is loaded but instead you can make sure your code is executed when you want it to.
The JWPlayer API are not that difficult. You can retrive the informations you need even not knowing the container id.
This is an example:
var player = jwplayer(0); // get the first jwplayer element of the page
var video = player.getPlaylistItem(); // get the player video
var url = video.file // retrieve the video url
I think the setTimeout or setInterval are unreliable.
Setting up a listener on jwplayer onReady event would be better.
The pessimistic answer to this is that you can't wait until a page has finished all AJAX operations etc. because web pages can continue loading new content indefinitely if they wish.
What you might consider is running your code every time a new HTML element is added to the page. This way, you can be certain to catch JWPlayer the moment it is inserted into the page.
document.addEventListener("DOMNodeInserted", yourRemovalFunction);
How can i refresh a page for every one minute using javascript.
Note: I don't have control/option to edit HTML body tag (where we usually call onload function).
Just insert this code anywhere in the page:
<script type="text/javascript">
setTimeout(function(){
location = ''
},60000)
</script>
<script type="text/javascript">
setTimeout(function () {
location.reload();
}, 60 * 1000);
</script>
setTimeout will reload the page after a specified number of milliseconds, hence 60 * 1000 = 1m. Also, since the page is being refreshed, the timeout will always be set on page load.
You do not need to have the code in the body tag. Just add this snippet below and it should work no matter where it is in the page.
<script type="text/javascript">
setInterval('window.location.reload()', 60000);
</script>
As long as you can access the HTML some where and your editor doesn't filter out tags you should be fine. If your editor has a separate area for JavaScript code then just enter setInterval line. :)
Here's the thing mate!
(Point 4 is for this particular question)
1). If you want to reload the same windows over and over again then just execute
window.location.reload()
2). If you want to hard reload from the server then execute
window.location.reload(true)
(basically, just pass true as a boolean arg to the same line of code)
3). If you want to do the same job as point 1 and 2 with a time out. i.e. execute the reload after some time JUST ONCE, then execute
setTimeout("window.location.reload()",10000);
(this should execute on the window after 10 sec. JUST ONCE)
4). If you want to keep reloading the window with a certain timeout then execute
setInterval("window.location.reload()",10000);
(this should execute on the window after 10 sec. with 10 sec. for the interval)
Surely,there're many ways to pass a callback..
setInterval(function(){window.location.reload();},10000);
or
<code>
function call1(){
location.reload(true);
}
setInterval(call1,10000);
</code>
Note:
-Have a look at MDN Guides for [setTimeout][1] and [setInterval][2] functions.
-Using the window object is optional but good to be used. (window is a global object and already available to your current window.)
If you don't want to edit the page, here's the trick. Open the console and write the below-mentioned snippet.
INTERVAL = 5 // seconds
STOP_AFTER = 15 // seconds
// Open the same link in the new tab
win1 = window.open(location.href);
// At every 5 seconds, reload the page
timer1 = setInterval(() => {
win1.location.reload();
console.log("Refreshed");
},INTERVAL*1000)
// Stop reloading after 15 seconds
setTimeout(() => clearInterval(timer1), STOP_AFTER*1000)
Since you want to reload it, you can not simply write location.reload() since the console will be cleared once it is reloaded.
Therefore, it will open a new tab with the same link. It will be easily able to control the 2nd tab using the console of the 1st tab.
When your URL has parameters, it seems that using location = '' doesn't work in IE8. The page reloads without any parameters.
The following code works for me :
<script type="text/javascript">
setTimeout(function(){
window.location.href = window.location.href;
},10000)
</script>