Develop Reference

Why does this code sometimes not run when refreshing the page?

I have a page loading element which displays during the pageload and is then removed. Most of the time, this works, but sometimes it doesn't so the user is left staring at the loader forever.
It usually works, but sometimes it doesn't when refreshing the page. In Chrome, if I open developer tools, then it does always work fine.
document.addEventListener('DOMContentLoaded', function (event) {
console.log("removing loader");
$('.preloader').fadeOut(500, function () { $('.preloader').remove(); });
});
window.addEventListener('load', function (event) {
console.log("removing loader");
$('.preloader').fadeOut(500, function () { $('.preloader').remove(); });
});
This code is in a js file, and I think what happens is that the file is cached, so it doesn't run again during the refresh. Does the sound correct? Should I just put this in a script tag to ensure it always runs?
I put the code in both events as I was having issues with it sometimes not running. However, maybe this is not actually necessary.

If there are any errors during the loading of elements, some listeners can fail to trigger. Have to tried the simple,
$(document).ready(function(){
console.log("removing loader");
$('.preloader').fadeOut(500, function () { $('.preloader').remove(); });
});

iPad is crashing after refresh in JavaScript

I have got a website that is reloading in JavaScript when $(window).width() > 1000px and after changing it to $(window).width() <= 1000px
I just want to reload my page after switching between mobile and desktop views.
After changing orientation on iPad 4 (iOS 10.3) for a few times - browser says that Problem occured and the page was reloaded. And iPad is stucking in infinite loop of reloading not by my script but by it's Safari.
$(window).resize(function() {
if($(window).width()>mobileBreak) {
if(device==='mobile') {
setTimeout(function() {
refresh();
},200);
}
}
else {
if(device==='desktop')
setTimeout(function() {
refresh();
}, 200);
}
}
});
function refresh() {
window.location.reload();
}
at the beginning of course i'm checking $(window).width() and setting up variable device.
It is working great on PC's, but not well on tablets with IOS.
Don't ask me why i have to reload page each time on view change. I just have to.

I found answer to my question! When i'm refreshing page on orientation change - Safari thinks that it's some kind of loop and showing error. I had added hidden form and each time when I'm changing orientation i'm setting random value of input inside this form and sending POST to current location. It works awesome, no bugs, no problems! Mayby this will help somebody with this problem in future.

Using resize may be the real cause of the issue, it may be getting called a few times when the size is changed. You can use jquerymobile throttled resize event for that purpose instead of window.resize().
https://api.jquerymobile.com/throttledresize/
$(window).on('throttledresize', function() {
if($(window).width()>mobileBreak) {
if(device==='mobile') {
setTimeout(function() {
refresh();
},200);
}
} else {
if(device==='desktop')
setTimeout(function() {
refresh();
}, 200);
}
}
});
function refresh() {
window.location.reload();
}

Safari's window.history.go(index) is off by 1

I'm trying to make a button that takes the user back two pages, but I've noticed something odd about Safari. Here is my working function:
jQuery(function(){
jQuery('.go-back').click(function(e) {
if(jQuery.browser.safari) {
window.history.go(-3);
} else {
window.history.go(-2);
}
});
});
Does anyone have an explanation for why the indexing is off by 1 in Safari?

How to run a Javascript function everytime f5 is used to refresh the page

The following code works for the first time that the page is loaded but when the page is refreshed using F5, it does not work on Firefox. In Chrome it works fine.
$(document).ready(function() {
$("iframe").each(function() {
// Using closures to capture each one
var iframe = $(this);
iframe.on("load", function() { // Make sure it is fully loaded
iframe.contents().click(function(event) {
iframe.trigger("click");
});
});
iframe.click(function() {
alert("Clicked...");
});
});
});

This code works fine for me
$(document).ready(function () {
document.getElementById('main_iframe').contentWindow.location.reload(true);
$('iframe').load(function () {
$(this).contents().find("body").on('click', function (event) {
alert("clicked....")
});
});
});

put all your code in jQuery(function(){
//here
}) and all will be ok. That runs whens the page loads, each f5 action, remove the other code for testing reload.

jQuery load file function triggers only in one situation

My jQuery script below works perfectly on all devices and PC except Windows Phone. I think it's a pretty standard coding but it gives me a problem. The #feed with the engine.php in it, does not update when I press refresh. ( only on Windows Phone)
A workaround I found is that if I cap +=1; on the #refresh click function then it works.
I am using the latest jQuery.
How can I fix this? Is there anything special about Windows Phone to make use of it ? It seems that there is something like cache, because when I refresh the page it does not chaneg. When I close the tab and open it again it takes me to the updated page.
<script type="text/javascript">
var cap = 18;
$(function() {
function loadfeed() {
$('#feed').load('engine.php?cap=' + cap, function() {
$("#loadmore").val('Show More');
});
}
loadfeed();
$("#refresh").click(function() {
loadfeed();
});
});
</script>
<div id="nav_bar">
refresh
</div>