Develop Reference

Don't show page until content has fully loaded

I am creating a landing page which should exist in two languages. The texts that should be shown are in two JSON files, called accordingly "ru.json" and "en.json". When a user clicks on the "Change language" button, the following function is executed:
function changeLang(){
if (userLang == 'ru') {
userLang = 'en';
document.cookie = 'language=en';
}
else {
userLang = 'ru';
document.cookie = 'language=ru';
}
var translate = new Translate();
var attributeName = 'data-tag';
translate.init(attributeName, userLang);
translate.process();
}
Where Translate() is the following:
function Translate() {
//initialization
this.init = function(attribute, lng){
this.attribute = attribute;
if (lng !== 'en' && lng !== 'ru') {
this.lng = 'en'
}
else {
this.lng = lng;
}
};
//translate
this.process = function(){
_self = this;
var xrhFile = new XMLHttpRequest();
//load content data
xrhFile.open("GET", "./resources/js/"+this.lng+".json", false);
xrhFile.onreadystatechange = function ()
{
if(xrhFile.readyState === 4)
{
if(xrhFile.status === 200 || xrhFile.status == 0)
{
var LngObject = JSON.parse(xrhFile.responseText);
var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
var elem = allDom[i];
var key = elem.getAttribute(_self.attribute);
if(key != null) {
elem.innerHTML = LngObject[key] ;
}
}
}
}
};
xrhFile.send();
}
Everything works fine, however, when a user opens the page for the first time, if his Internet connection is bad, he just sees the elements of the page without text. It is just 1-2 seconds, but still annoying.
The question is, is there any way to check the text has loaded and display the page elements only on this condition?

You can use $(document).ready() in this way
$(document).ready(function(){
//your code here;
})
You can use the JavaScript pure load event in this way
window.addEventListener('load', function () {
//your code right here;
}, false);
Source: Here

translate.process() is asynchronous code which needs to make a call to a server and wait for its response. What it means is that, when you call this function, it goes in the background to go do its own thing while the rest of the page continues loading. That is why the user sees the page while this function is still running.
One minimal way I can think around this is by adding this to your css files in the head tag.
body { display: none }
And then, under this.process function, after the for loop ends, add
document.body.style.display = 'block'

If you want to suppori IE8:
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// run some code.
}
}

Put the code you want to execute when the user initially loads the page in a DOMContentLoaded event handler like below:
document.addEventListener('DOMContentLoaded', function() {
console.log('Whereas code execution in here will be deffered until the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.');
});
console.log('This will log immediatley');
It's important to note that DOMContentLoaded is different than the load event

Browser version specification for Outdated browser tool

I am using the following toll to check for browser version accessing my website and display a message at the top to notify the user to update his browser:
https://github.com/mikemaccana/outdated-browser
In the following example I am targeting < IE10 browsers.
<!-- plugin call -->
<script>
//event listener form DOM ready
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
//call function after DOM ready
addLoadEvent(function(){
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'IE10',
languagePath: ''
})
});
</script>
Can I use the tool to detect a specific version of Firefox also in the lowerThan: field. If yes how should I proceed?

I would recommend detecting individual features. Try initializing whatever you need and if it fails then display the message. You can test all your features in a startup function, or try initializing plugins and see if it fails.
for example:
function supportsWebAudio() {
var hasWebKitAudio = 'webkitAudioContext' in window;
var hasAudioContext = 'AudioContext' in window;
if (!(hasWebKitAudio || hasAudioContext)) {
var audioElement = document.createElement('audio');
return audioElement.canPlayType;
}
return true;
}

How to Properly Use this in External Javascript?

I have two javascript functions that work fine so long as I keep them in the HTML of my head tag, but I'd like to move them to an external javascript file.
function uploadImageSB() {
Shadowbox.init({});
// shadowbox for image upload
Shadowbox.open({
content: 'photo.cgi?function=photo_upload',
player: 'iframe',
title: 'Image Upload',
height: 200,
width: 500,
options: {
onFinish: function () {
// get the iframe
var iframe = document.getElementById('sb-player');
var formName = 'photoForm';
// add an event listener to determine when the sb form is fully loaded
if (iframe.addEventListener) {
// use addEventListener for Safari, Chrome, Firefox
iframe.addEventListener("load", getTA(formName), true);
} else {
// use attachEvent for IE
iframe.attachEvent("onload", getTA(formName));
}
}
}
})
};
The above javascript calls this next function:
function getTA(fn) {
// get the contents of the tinymce editor
var ed = tinymce.activeEditor;
var content = ed.save();
// dynamically create textarea
var ta = document.createElement('textarea');
ta.textContent = content;
ta.name = 'article';
ta.value = ta.textContent;
// get the iframe content
var iframeContent = this.contentDocument || this.contentWindow.document;
// append the textarea to the shadowbox form, but do not display it
var form = iframeContent.getElementById(fn);
form.appendChild(ta);
form.getElementsByTagName('textarea')[0].style.display = 'none';
};
I think the problem is with my usage of this here:
var iframeContent = this.contentDocument || this.contentWindow.document;
But I'm not sure how fix it. thanks.

As per my understanding your code shouldn't work when you are calling from head too. Problem is with your following code.
if (iframe.addEventListener) {
// use addEventListener for Safari, Chrome, Firefox
iframe.addEventListener("load", getTA(formName), true);
} else {
// use attachEvent for IE
iframe.attachEvent("onload", getTA(formName));
}
You are calling the getTA(formName) function there itself and because it is called in the context of window, you dont get the iframe as your context ie this.
To solve this problem you need to provide it as a listener as a function object as argument as given below.
EDIT : Using closure to support using same fn for multiple instance.
if (iframe.addEventListener) {
// use addEventListener for Safari, Chrome, Firefox
iframe.addEventListener("load", (function(){
return function(){
getTa.call(this, formName);
}
})(), true);
} else {
// use attachEvent for IE
iframe.attachEvent("onload", (function(){
return function(){
getTa.call(this, formName);
}
})());
}
That should do it.

Get the hashchange event to work in all browsers (including IE7)

I have some code (written by another developer) that is doing AJAX page loading inside of WordPress (e.g. no page reloads) when you click a nav item, AJAX refreshes the primary content area. My problem is that it's broken in IE7 and I have no idea where to start in terms of debugging.
The original opening lines were
var queue = 0;
$('document').ready(function() {
window.addEventListener("hashchange", hashChange, false);
// Define window location variables
var windowHost = window.location.host,
windowHash = window.location.hash,
windowPath = window.location.pathname;
But I changed them to make the addEventListener conditional on the basis of whether that method was present or not. Some research told me that the method is not available in older versions of IE (e.g. 7 in my case). Also, the IE7 debug console was identifying that as an unavailable method, so that's pretty clear. I rewrote the lines as follows, but the code is still not working:
var queue = 0;
$('document').ready(function() {
if(window.addEventListener) {
window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
window.attachEvent("hashchange", hashchange, false);
}
// Define window location variables
var windowHost = window.location.host,
windowHash = window.location.hash,
windowPath = window.location.pathname;
The full original script can be viewed in this pastebin: http://pastebin.com/Jc9ySvrb

attachEvent requires events to be prefixed with on.
You've different capitalizations for the method. Change hashchange in attachEvent tohashChange to get the event to work in IE8.
Use the suggested implementation to support the hashchange implementation for IE7- and other old browsers.
I have created a cross-browser implementation, which adds the hashchange feature to browsers, even those who do not support it. The fallback is based on the specification.
//function hashchange is assumed to exist. This function will fire on hashchange
if (!('onhashchange' in window)) {
var oldHref = location.href;
setInterval(function() {
var newHref = location.href;
if (oldHref !== newHref) {
var _oldHref = oldHref;
oldHref = newHref;
hashChange.call(window, {
'type': 'hashchange',
'newURL': newHref,
'oldURL': _oldHref
});
}
}, 100);
} else if (window.addEventListener) {
window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
window.attachEvent("onhashchange", hashChange);
}
Note: This code is useful for one hashchange event. If you want to add multiple hashchange handlers, use the following method.
It defines two functions, addHashChange and removeHashChange. Both methods take a function as an argument.
(function() {
if ('onhashchange' in window) {
if (window.addEventListener) {
window.addHashChange = function(func, before) {
window.addEventListener('hashchange', func, before);
};
window.removeHashChange = function(func) {
window.removeEventListener('hashchange', func);
};
return;
} else if (window.attachEvent) {
window.addHashChange = function(func) {
window.attachEvent('onhashchange', func);
};
window.removeHashChange = function(func) {
window.detachEvent('onhashchange', func);
};
return;
}
}
var hashChangeFuncs = [];
var oldHref = location.href;
window.addHashChange = function(func, before) {
if (typeof func === 'function')
hashChangeFuncs[before?'unshift':'push'](func);
};
window.removeHashChange = function(func) {
for (var i=hashChangeFuncs.length-1; i>=0; i--)
if (hashChangeFuncs[i] === func)
hashChangeFuncs.splice(i, 1);
};
setInterval(function() {
var newHref = location.href;
if (oldHref !== newHref) {
var _oldHref = oldHref;
oldHref = newHref;
for (var i=0; i<hashChangeFuncs.length; i++) {
hashChangeFuncs[i].call(window, {
'type': 'hashchange',
'newURL': newHref,
'oldURL': _oldHref
});
}
}
}, 100);
})();
// Usage, infinitely many times:
addHashChange(function(e){alert(e.newURL||location.href);});

attachEvent takes on two params:
bSuccess = object.attachEvent(sEvent, fpNotify)
[And is needed for all versions of IE below IE9! :( See MDN reference
]
This could work:
if(window.addEventListener) {
window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
window.attachEvent("onhashchange", hashchange);//SEE HERE...
//missed the on. Fixed thanks to #Robs answer.
}
Of course if it is possible, you should just use JQuery, since it encapsulates all this for your.
And as always there is a plugin out there:
http://benalman.com/projects/jquery-hashchange-plugin/

Detecting when an iframe gets or loses focus

What's the correct way of detecting when an iframe gets or loses focus (i.e. will or will not receive keyboard events)? The following is not working in Fx4:
var iframe = /* my iframe */;
iframe.addEventListener("focus", function() { /* never gets called */ }, false);

You can poll "document.activeElement" to determine if it matches the iframe. Polling isn't ideal, but it works:
function checkFocus() {
if(document.activeElement == document.getElementsByTagName("iframe")[0]) {
console.log('iframe has focus');
} else {
console.log('iframe not focused');
}
}
window.setInterval(checkFocus, 1000);

i know it's old, but i also had the same problem.
i ended up using this little pice of code:
$(document).on('focusout', function(){
setTimeout(function(){
// using the 'setTimout' to let the event pass the run loop
if (document.activeElement instanceof HTMLIFrameElement) {
// Do your logic here..
}
},0);
});

Turns out it's not really possible. I had to change the logic of my page to avoid the need of tracking if the iframe has focus.

How to check when an iframe has been clicked in or out of as well as hover-state.
Note: I would highly recommend you don't choose a polling method and go with an event driven method such as this.
Disclaimer
It is not possible to use the focus or blur events directly on an iframe but you can use them on the window to provide an event driven method of checking the document.activeElement. Thus you can accomplish what you're after.
Although we're now in 2018, my code is being implemented in GTM and tries to be cross browser compatible back to IE 11. This means there's more efficient code if you're utilizing newer ES/ECMAScript features.
Setup
I'm going to take this a few steps further to show that we can also get the iframe's src attribute as well as determine if it's being hovered.
Code
You would ideally need to put this in a document ready event, or at least encapsulate it so that the variables aren't global [maybe use an IIFE]. I did not wrap it in a document ready because it's handled by GTM. It may also depend where you place this or how you're loading it such as in the footer.
https://jsfiddle.net/9285tbsm/9/
I have noticed in the JSFiddle preview that it's already an iframe, sometimes you have to focus it first before events start to capture. Other issues can be that your browser window isn't yet focused either.
// Helpers
var iframeClickedLast;
function eventFromIframe(event) {
var el = event.target;
return el && el.tagName && el.tagName.toLowerCase() == 'iframe';
}
function getIframeSrc(event) {
var el = event.target;
return eventFromIframe(event) ? el.getAttribute('src') : '';
}
// Events
function windowBlurred(e) {
var el = document.activeElement;
if (el.tagName.toLowerCase() == 'iframe') {
console.log('Blurred: iframe CLICKED ON', 'SRC:', el.getAttribute('src'), e);
iframeClickedLast = true;
}
else {
console.log('Blurred', e);
}
}
function windowFocussed(e) {
if (iframeClickedLast) {
var el = document.activeElement;
iframeClickedLast = false;
console.log('Focussed: iframe CLICKED OFF', 'SRC:', el.getAttribute('src'), e);
}
else {
console.log('Focussed', e);
}
}
function iframeMouseOver(e) {
console.log('Mouse Over', 'SRC:', getIframeSrc(e), e);
}
function iframeMouseOut(e) {
console.log('Mouse Out', 'SRC:', getIframeSrc(e), e);
}
// Attach Events
window.addEventListener('focus', windowFocussed, true);
window.addEventListener('blur', windowBlurred, true);
var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
iframes[i].addEventListener('mouseover', iframeMouseOver, true);
iframes[i].addEventListener('mouseout', iframeMouseOut, true);
}

I have solved this by using contentWindow instead of contentDocument.
The good thing about contentWindow is
it works also in case user clicks another window (another application) or another browser tab. If using activeElement, if user clicks away from the entire window to go to another application, then that logic still think the iframe is in focus, while it is not
and we don't need to poll and do a setInterval at all. This uses the normal addEventListener
let iframe = document.getElementsByTagName("iframe")[0];
// or whatever way you do to grab that iFrame, say you have an `id`, then it's even more precise
if(iframe){
iframeWindow = iframe.contentWindow;
iframeWindow.addEventListener('focus', handleIframeFocused);
iframeWindow.addEventListener('blur', handleIframeBlurred);
}
function handleIframeFocused(){
console.log('iframe focused');
// Additional logic that you need to implement here when focused
}
function handleIframeBlurred(){
console.log('iframe blurred');
// Additional logic that you need to implement here when blurred
}

This solution is working for me on both mobile and desktop:
;(function pollForIframe() {
var myIframe = document.querySelector('#my_iframe');
if (!myIframe) return setTimeout(pollForIframe, 50);
window.addEventListener('blur', function () {
if (document.activeElement == myIframe) {
console.log('myIframe clicked!');
}
});
})();

The solution is to inject a javascript event on the parent page like this :
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML =
"document.addEventListener('click', function()" +
"{ if(document.getElementById('iframe')) {" +
// What you want
"}});";
head.appendChild(script);

Here is the code to Detecting when an iframe gets or loses focus
// This code can be used to verify Iframe gets focus/loses.
function CheckFocus(){
if (document.activeElement.id == $(':focus').context.activeElement.id) {
// here do something
}
else{
//do something
}
}

A compact function that accepts callbacks you want to run when iframe gets or loses focus.
/* eslint-disable no-unused-vars */
export default function watchIframeFocus(onFocus, onBlur) {
let iframeClickedLast;
function windowBlurred(e) {
const el = document.activeElement;
if (el.tagName.toLowerCase() == 'iframe') {
iframeClickedLast = true;
onFocus();
}
}
function windowFocussed(e) {
if (iframeClickedLast) {
iframeClickedLast = false;
onBlur();
}
}
window.addEventListener('focus', windowFocussed, true);
window.addEventListener('blur', windowBlurred, true);
}

This might work
document.addEventListener('click', function(event) {
var frame= document.getElementById("yourFrameID");
var isClickInsideFrame = frame.contains(event.target);
if (!isClickInsideFrame ) {
//exec code
}
});