Súgó - Keresés - Tagok - Naptár
Teljes változat: Böngésző teszthez egy ötlet
PC WORLD Segélyvonal > WEBSAROK > Webszerkesztés, programozás > HTML
Arkangyal
2007. augusztus 24. 13:34
Ezt kell berakni az oldaladba:

1. HEAD rész
KÓD
<script>
function dome()
{
valami123 = window.open("bongeszoteszt.html","nev", & #34;menubar=no,location=no,resizable=yes,scrollbars=yes,stat
us=no,width=400px,height=360px,left=100,top=100");
}
</script>

2. hivatkozni rá, a példaként linkkel:
KÓD
<a href="java script:dome()">Oldal megjelenítés?</a>

Egyszerűbben is megoldható (simán linkelés, stb.), de nekem így tetszik.

Ez pedig abba az oldalba, ahol tesztelsz:
KÓD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>- [ böngésző teszt ] </title>
<style>
table {border-width:1;border-color:green}
tr {border-width:1;border-color:green}
td {border-width:1;border-color:green}
li {list-style:square}
</style>
<script language="JavaScript" src="../js/plusminus.js">
</script>
<!--// Nyomtatási oldal - tetszés szerint módosítható //-->
<link rel=alternate media=print href="about:blank">
</head>

<body bgcolor="white" text="BLACK" link="#006699" topmargin="0" leftmargin="0" id=body>


<NOSCRIPT>

<table style="background-color:white;border: 6 red dashed;color:red;margin:10 10 10 10" width="95%" align=center><tr><td>
Kedves Látogató!<P>Oldalaink <B>JavaScript</B> technológiát használnak, kérjük engedélyezze böngészőjében ezek használatát.</p>
<OL>
<LI><b>Internet Explorer</b>:
    <UL>
    <LI>Eszközök
    <LI>Internetbeállítások...
    <LI>Biztonság (fül)
    <LI>Válassza ki az Internet-es zónát (vagy a Megbízható helyeket, ha honlapunk címét a megbízható helyekhez sorolta be)
    <LI>Klikkeljen az "Egyéni szint" gombra
    <LI>Keresse ki az "Active scripting" opcióit és módosítsa "Engedélyezés" állapotra.
    <LI>Az OK gombokra kattintva zája be a paneleket
    <LI>Töltse be újra az oldalt
    </UL>
<LI><b>Mozilla Firefox</b>:
    <UL>
    <LI>Eszközök
    <LI>Beállítások
    <LI>Tartalom (fül)
    <LI>Pipálja be a "JavaScript engedélyezése" opciót
    <LI>Az OK gombokra kattintva zája be a panelt
    <LI>Töltse be újra az oldalt
    </UL>
<LI><b>Netscape Navigator</b>:
    <UL>
    <LI>Edit
    <LI>Preferences
    <LI>Válassza ki az "Enable Java Script for Navigator" opciót
    <LI>Az OK gombokra kattintva zája be a panelt
    <LI>Töltse be újra az oldalt
    </UL>

</OL>
</TD></TR></TABLE>
</NOSCRIPT>

    <table style="background-color:white;border: 2 green dashed;color:red;margin:10 10 10 10" width=100%>
    <tr>
    <td width=400 valign=top>
    <table width=100% class=hir2><caption class=hir2>Az oldalhoz ajánlott adatok</caption><tr class=hir2><td class=hir2>
<table width=100% class=hir2>
<tr class=hir2>
<td class=js width=100>Böngészők:
</td>
<td class=js>Microsoft Internet Explorer (kompatibilisság)
</td>
</tr>
<tr class=hir2>
<td class=js width=100>Színmélység:
</td>
<td class=js>16 bit
</td>
</tr>
<tr class=hir2>
<td class=js width=100>Felbontás:
</td>
<td class=js>1280 x 1024 pixel
</td>
</tr>
<tr class=hir2>
<td class=js width=100>Stílusok:
</td>
<td class=js>Támogatott
</td>
</tr>
</table>
    </td></tr>
    </table>
</td></tr>
<tr><td>
<hr width=100% color=green>
<NOSCRIPT>Az Ön adatainak megjelenítéséhez szükséges a JavaScript engedélyezése. Kérem, kövesse a főoldal útmutatását. További probléma esetén értesítse a honlap tulajdonosát.</NOSCRIPT>
</td></tr>
<tr><td>

<table width=100% class=hir2><caption class=hir2>Az Ön adatai</caption><tr class=hir2><td class=hir2>
<script LANGUAGE="JavaScript">

var xy = navigator.appVersion;
xz = xy.substring(0,4);
var dc =document.write;
dc("<table width=100% class=hir2>");
dc("<tr class=hir2><td class=js valign=top width=100>Böngésző: </td><td class=js><b>");
dc(navigator.appName);
    dc("</b></td></tr>");
dc("<tr class=hir2><td class=js valign=top width=100>Színmélység: </td><td class=js><b>");
if (window.screen.colorDepth<16)
    {
    dc("<input align=absmiddle type=image src=../jpg/nemok.jpg onclick=changefav('szin16'); alt=Túlságosan alacsony érték! Klikkeljen a gombra segítséghez!> ");
    dc("<ul style=display:none id=szin16>");
    dc("<li>Jobb-klikkeljen az Asztalon");
    dc("<li>Válassza ki a Tulajdonságok opciót");
    dc("<li>Klikkeljen a Beállítások fülre");
    dc("<li>Módosítsa a színmélységet a csúszka segítsével");
    dc("</ul>");
    }
dc(window.screen.colorDepth);
dc(" bit</b>");
if (window.screen.colorDepth>15) {dc(" <img src=../jpg/pipa.jpg border=0>");}
dc("</td></tr>");
if (self.screen) {    
        width = screen.width
        height = screen.height
}

// for NN3 w/Java
else if (self.java)
    {
    var javakit = java.awt.Toolkit.getDefaultToolkit();
    var scrsize = javakit.getScreenSize();      
    width = scrsize.width;
    height = scrsize.height;
    }
else
    {
    width = height = '?';
    }0
dc("<tr class=hir2><td class=js valign=top width=100>Felbontás: </td><td class=js><b>");
if (width<1280)
    {
    dc("<input align=absmiddle type=image src=../jpg/nemok.jpg onclick=changefav('felbontas800'); alt=Túlságosan alacsony érték! Klikkeljen a gombra segítséghez!> ");
    dc("<ul style=display:none id=felbontas800>");
    dc("<li>Jobb-klikkeljen az Asztalon");
    dc("<li>Válassza ki a Tulajdonságok opciót");
    dc("<li>Klikkeljen a Beállítások fülre");
    dc("<li>Módosítsa a felbontást a csúszka segítsével");
    dc("</ul>");
    }
if (width>1280)
    {
    dc("<input align=absmiddle type=image src=kep/miss_note.gif onclick=changefav('felbontas1280'); alt=Viszonylag magas érték. Klikkeljen a gombra segítséghez!> ");
    dc("<ul style=display:none id=felbontas1280>");
    dc("<li>Jobb-klikkeljen az Asztalon");
    dc("<li>Válassza ki a Tulajdonságok opciót");
    dc("<li>Klikkeljen a Beállítások fülre");
    dc("<li>Módosítsa a felbontást a csúszka segítsével");
    dc("</ul>");
    }
dc(width +" × "+ height + " pixel");
if (width<1281 & width>1279) {dc(" <img src=../jpg/pipa.jpg border=0>");}
    dc("<tr class=hir2><td class=js valign=top width=100>Stílusok: </td><td class=js><b>");
dc("<div id='checkcss' style='position:absolute;'></div>");
var yes = "Támogatott";
var no   =  "Nem támogatott";
checktype = document.layers ? document.checkcss : checkcss;
vanecss = (checktype) ? yes : no;
if (vanecss==no)
    {
    dc("<input align=absmiddle type=image src=../jpg/nemok.jpg onclick=changefav('cssq'); alt=A stílusok támogatása szükséges! Klikkeljen a gombra segítséghez!> ");
    dc("<ul style=display:none id=cssq>");
    dc("<li>Tipp: Szerezzen be újabb böngészőt. Példák: <a target=_blank href=http://www.microsoft.com/ie>Microsoft Internet Explorer</a> (6.0 verzió vagy újabb), <a target=_blank href=http://www.firefox.com>Firefox</a> (1.1 verzió vagy újabb), <a target=_blank href=http://www.netscape.net>Netscape</a> (7.1 verzió vagy újabb)");
    dc("</ul>");
    }
dc(vanecss);
    dc("</b>");
if (vanecss==yes) {dc(" <img src=../jpg/pipa.jpg border=0>");}
    dc("</td></tr>");
dc("</table>");
</script>
        </td></tr></table>
</body>
</html>


Ez külön script fájl, hiba esetén a képre kattintva ez hozza elő az infot:
KÓD
function changefav(obj)
{
    if(document.getElementById)
    {
        var el = document.getElementById(obj);
/* csak egy lenyitható esetére...        var ar = document.getElementById("cont").getElementsByTagName("SPAN"); */
        if(el.style.display == "none")
        {
            /* A kommentezett tagok segítségével - ezek itt alább - elérhető, hogy
                a lenyitásra kattintva a többinél is feltételvizsgálat legyen: ergo
                a többi össze fog csukódni.
            for (var i=0; i<ar.length; i++)
            {
            ar[i].style.display = "none";
            }*/
            el.style.display = "";
        }
    else
        {
            el.style.display = "none";
        }
    }
}


Kell kettő kép fájl, én pipa.jpg és nemok.jpg-knek neveztem őket. Figyeljetek arra, hogy a hivatkozások jók legyenek!

Elég elvadultan az 1280x1024-es felbontás a jó ennél a példánál, tehát értelemszerűen ezt módosítsd neked megfelelőre.
Ha találtok benne hibát (általában táblákat szoktam amúgy elrontani tongue.gif), írjatok.
Spányik Balázs
2007. augusztus 24. 14:20
Ez mi ez? huh.gif
h.arpad
2007. augusztus 24. 18:35
@Arkangyal:
Ajánlom figyelmedbe a böngészők érzékelésének kifinomultabb módját. (userAgent vs. appVersion
 az Opera érzékelésére és a Mozilla és a Netscape megkülönböztetésére ani_wink.gif ) Ugyanez a téma, magyarul (jó, nem épp ugyanez, de nagyjából átfedi.) Avagy mennyit ér a navigator.appVersion... tongue.gif
Arkangyal
2007. szeptember 15. 12:42
Így tetszett smile.gif. Balázs: van egy oldalad és ha a felhasználó nem tudja, hogy az általad kiírt ajánlott megtekintési adatoknak megfelel-e, akkor ezzel a felugró ablakkal megnézheti.
Spányik Balázs
2007. szeptember 17. 11:26
Megfelel-e a mi? A böngészője? De hát úgy írom meg az oldalt, hogy az Firefoxon és a két IE-n jó legyen, az Opera és Safari felhasználókért pedig serényen imádkozom. Miért van erre szükségem? roll.gif Illetve, ha nem is felel meg, akkor sem fogom neki azt kiírni, hogy "hess innen, nem felelsz meg", mert sosem jön vissza. tongue.gif
Arkangyal
2007. szeptember 17. 14:42
Na várj, nem csak a böngésző részről van szó, talán megint - mint a nero-s parancsoknál... kicsit javítanom kéne ezen ani_wink.gif - rossz a téma megfogalmazás. Nyílván - ahogy írta Árpád is - simán lehetne még finomítani akár alverzióik kereséséig is a pontos böngésző példány megállapítását. De teszteled a felbontást, a színmélységet és azt is, hogy a böngésző kezeli-e a stílusokat. S ha valamelyik nem megfelelő, akkor a hiba gombra kattintva kaphat segítséget a látogató, hogy hol tudja azt átállítani.
Ez a tartalom egy lebutítottváltozata. A teljes változat képekkel kiegészült megtekintéséhez kérünk, kattints ide.