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;
}
Related
i use a little java script to open pdf documents in a smaller tab:
// JavaScript Document
function openHeyPopup(objectLink) {
window.open(objectLink, "Externer Link", "width=700,height=600,scrollbars=yes");
}
function initHeyPopup()
{
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "heypopup")){
anchor.onclick = function () {openHeyPopup(this); return false;}
}
}
}
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(initHeyPopup); // run initLightbox onLoad
This works fine for chrome and firefox. But in Internet explorer i get a empty browser window.
http://www.interieursalon.com/wp/wp-content/uploads/2016/08/web-interieursalon-portfolio.pdf
Anybody no how can i fix this for IE?
Best regards
In IE due to security reasons, opening new tabs with insecure content is blocked. we can try out this below code which helps us in downloading the file.
//window.navigator checks for IE version if yes, it gets executed and in place of data give your blob.
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
return window.navigator.msSaveOrOpenBlob(data, "data.pdf");
}
I'm using this code, which has stemmed from here and here.
$('#my_button').on('click', function (e) {
var iframe = document.createElement('iframe');
iframe.id = "my_iframe";
iframe.onload = function() {
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.getElementsByTagName('body')[0].innerHTML = "<p>test123</p>";
iframe.contentWindow.focus();
iframe.contentWindow.print();
$("#my_iframe", top.document).remove();
};
document.getElementsByTagName('body')[0].appendChild(iframe);
});
Without the remove line, it prints fine. However, the remove line removes the iframe before it has a chance to execute the print(). How can I set up some kind of callback so that it prints and only then removes the iframe?
Thanks.
I found this solution when I was searching for print event detection:
http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
Here I add the JS code as requested by Stano, but it is important to also read the whole linked post as there are limitations to this approach. In general the post is about the onafterprint event that only works in IE and a solution to make that event work in other browsers.
(function() {
var beforePrint = function() {
console.log('Functionality to run before printing.');
};
var afterPrint = function() {
console.log('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
create a function like this:
function printIframe(iframe,callback) {
iframe.contentWindow.print();
if (callback && typeof(callback) === "function") {
// execute the callback, passing parameters as necessary
callback();
}
}
and call it instead of the other two functions like this.
printIframe(iframe,function(){ $("#my_iframe", top.document).remove();})
if you like you can also put in a delay using the setTimeout.
setTimeout(function() {alert('hello');},1250);
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/
I am trying to debug some issue using IE 8 developer tools.
However after running the below code, the debugger throws error "Source Code not available for this location"
window.onload = function() {
tabberAutomatic(tabberArgs);
};
What does it mean ?
Above code is part of below code which basically runs the function tabberAutomatic once the document has finished loading:
/* This function adds tabberAutomatic to the window.onload event,
so it will run after the document has finished loading.
*/
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
/* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
I am trying to debug issue explained in my previous question browser showing progress bar as still progressing even when the page is loaded
Thanks for inputs!!
Are you looking at the right file in the debugger?
Have you tried this, it explains alot: http://msdn.microsoft.com/en-us/library/dd565625(v=vs.85).aspx
I'm using the popular addLoadEvent as follows for all my JS loading:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent( locationToggle );
addLoadEvent( step1 );
addLoadEvent( step2 );
addLoadEvent( step3 );
addLoadEvent( getCounties );
addLoadEvent( mapSelection);
Everything I've read suggests this is a fairly bullet proof way of avoiding onload conflicts. And yet this method doesn't appear to working any better than wrapping the functions in an anonymous window.onload function. Both methods are causing identical onload conflicts with this set of functions.
I am loading these functions from within the same file as the addLoadEvent function itself. I'm also using calender.js which is a third party file which uses mootools 1.2.4 in an additional file. My files are otherwise free of Javascript.
First, could someone verify I've not damaged the code and I'm using it right. Second could someone suggest why the above is not resolving the conflicts?
edit
The problem persists with all other Javascript files disabled.
Your code is fine. The problem is that setting event handlers in the DOM 0 way doesn't ensure that they won't replaced by other code.
You may try the new W3C standard addEventListener and the IE version attachEvent, because the handlers you attach by them cannot be replaced by 3rd party code.
// window.onload W3C cross-browser with a fallback
function addLoadEvent(func) {
if (window.addEventListener)
window.addEventListener("load", func, false);
else if (window.attachEvent)
window.attachEvent("onload", func);
else { // fallback
var old = window.onload;
window.onload = function() {
if (old) old();
func();
};
}
}
Note, that IE will execute the function in reversed order not in the order you added them (if this is a concern).
Finally, I don't know when you want to run your code, but if you don't want to wait for images to load you can execute your functions earlier then window.onload.
Dean Edwards has a nice script which will let you to do that.
With this you can attach your functions for an earlier event: document.ready (DOMContentLoaded)
// document.ready
function addLoadEvent(func) {
if (typeof func == "function") {
addLoadEvent.queue.push(func);
}
}
addLoadEvent.queue = [];
//////////////////////////////////////////////////////////////////////////////
// Dean Edwards/Matthias Miller/John Resig
function init() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
if (_timer) clearInterval(_timer);
// do stuff: execute the queue
var que = addLoadEvent.queue;
var len = que.length;
for(var i = 0; i < len; i++) {
if (typeof que[i] == "function") {
que[i]();
}
}
};
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
/* for Internet Explorer */
/*#cc_on #*/
/*#if (#_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)>"
+"<\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*#end #*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = init;
Note: the usage is the same for both methods as it was for your version.