Old Browser Warning - szól a régi IE-t használóknak, hogy váltsanak vagy frissítsenek

A probléma: Ha arra törekszel, hogy az összes létező böngészővel ugyanúgy viselkedjen az oldalad, akkor az oldal vagy egyiken sem lesz igazán élvezhető, vagy jobb, ha nagyon ráérsz...

Különösen a hírhedt Internet Explorer régebbi verziói bonyolítják meg az web-fejlesztő életét. Vagy az erőfeszítéseid nagy részét arra fordítod, hogy különböző verzió-specifikus hibákat ugrálj körbe, vagy pedig udvariasan figyelmezteted a felhaszálóidat, hogy ne tizenakárhány éves böngészővel közeledjenek.

Létező megoldások

Ez a probléma semmiképpen nem új eredetű, és számos megoldás is készült rá, például ez, ami az Internet Explorer biztonsági figyelmeztetését utánozza, így azt a látszatot kelti a látogatóban, hogy egy rendszer-üzenetet lát. Egy másik megközelítés már nem pusztán a IE frissítését javasolja, hanem felajánlja azt is, hogy a látogató más böngészőre váltson. Ezzel a megoldással viszont technikai szempontból nem voltam elégedett. Egy további már jól konfigurálható és igényes is, viszont egy külső javascript-et szúr be dinamikusan, amit el szerettem volna kerülni. A link egy külső oldalra viszi a felhasználót, aminek a tartalmát nem kontrollálom. Mindenesetre a harmadik opció a kedvencem a létező megoldások közül.

Célkitűzés

Blackout4hungary stílusban elsötétíti a képernyőt amig a látogató nem reagál
A látogató nyelvi beállításainak megfelelő üzenetet mutat
3 ingyenes böngészőt kínál fel, mindig az aktuálisan legújabb verziót, plussz lehetőséget ad az IE frissítésére
Rövid és egyszerű kód, pusztán egy darab script és az ikonok.
Nagyon kicsi böngésző-ablak esetében is jól viselkedik

Demo

Ha engedélyezve van a javascript, az oldal betöltésekor lefutott a script, és a böngésződ verziójától függetlenül megjelent a figyelmeztetés. Lefuttatod újra?

			
/*
 * Old Browser Warning - requests old IE users to switch or upgrade
 * 
 * Copyright 2011 Tibor Bősze <tibor.boesze@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * This small script will dynamically insert a div that fills up the whole client area
 * and suggests the user to upgrade IE or switch to another browser. Based on the browser
 * language text is displayed either in Hungarian or English.
 * 
 * Use this script between conditional comments, i.e.:
 * <!--[if lt IE 8]><script type="text/javascript" src="old-browser/warning.js"></script><![endif]-->
 */
(function() {
	var text_hu = [
			"Tudsz róla, hogy az Internet Explorer böngésződ elavult?",
			"A jobb böngészési élményért és a biztonságos internethasználat érdekében próbálj ki egy ingyenes, korszerű böngészőt, vagy frissítsd Internet Explorer-edet a legújabb verzióra.",
			"Íme néhány népszerű böngésző - letöltéshez kattints az ikonra!",
			"most inkább folytatom ezzel a böngészővel &raquo;" ];

	var text_en = [
			"Did you know that your Internet Explorer is out of date?",
			"To get better browsing experience and enhanced security, try one of the free, modern web browsers or upgrade to the newest version of Internet Explorer.",
			"Some popular web browsers - just click on the icon to get to the download page!",
			"continue with my current browser &raquo;" ];

	var text = (navigator.userLanguage || navigator.language).indexOf("hu") >= 0 ? text_hu : text_en;

	var browsers = [
			{
				name : "Firefox",
				icon : "old-browser/ff.png",
				link : "http://www.mozilla.com/firefox/"
			},
			{
				name : "Chrome",
				icon : "old-browser/ch.png",
				link : "http://www.google.com/chrome/"
			},
			{
				name : "Opera",
				icon : "old-browser/op.png",
				link : "http://www.opera.com/download/"
			},
			{
				name : "Internet Explorer 8+",
				icon : "old-browser/ie.png",
				link : "http://windows.microsoft.com/en-US/internet-explorer/downloads/ie"
			} ];

	var base = "/a/~shanq/";
	
	function create_warning() {
		var markup = "<div style='margin: 10% 20%;'><h1 style='color:white;'>" + text[0] + "</h1><p style='color:white;'>" + text[1] + "</p><p style='color:white;'>" + text[2] + "</p><div style='text-align: center'>";

		for ( var i = 0; i < browsers.length; i++) {
			markup += "<a href='" + browsers[i].link + "' title='" + browsers[i].name + "'><img border='0' src='" + base + browsers[i].icon + "' /></a>";
		}
		markup += '</div><a href="javascript:void(0)" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)">' + text[3] + '</a></div>';

		var div = document.createElement("div");
		div.setAttribute("id", "old-browser-warning");
		//Ouch... setAttribute("style", ...) does not work in IE < 8 
		div.style.top = div.style.left = div.style.margin = div.style.right = div.style.bottom = "0";
		div.style.backgroundImage = "url('" + base + "img/opacity80.png')";
		div.style.position = "fixed";
		div.style.overflow = "auto";
		div.style.zIndex = "2147483647";
		
		if (/MSIE 6/i.test(navigator.userAgent)) { //Ouch... fixed position does not work in IE < 7
			div.style.position = "absolute";
			div.style.width = "100%";
			function max(a,b) { return a > b ? a : b; }
			div.style.height = max(document.body.scrollHeight, document.body.clientHeight) + "px";
		}
		
		div.innerHTML = markup;
		document.body.appendChild(div);
	}

	var old_onload = window.onload;
	window.onload = typeof old_onload === 'function' ? function() {
		create_warning();
		old_onload();
	} : create_warning;
})();