SuneMedlem sedan nov. 1999367 inlägg Blev lite nyfiken på detta script som jag hittade på nätet. Den läser ut storleken på en bild som inte visas på sidan med en länk till bilden (images/1.gif om ni ska testa byt till en annan länk).
<script type="text/javascript" language="JavaScript"><!--
var i;
var oImage = new Image ;
oImage.onload = getSize ;
oImage.src = 'images/1.gif' ;
function getSize () {
document.write('width:'+this.width+' height:'+this.height+' <br>');
document.close() ;
}
//-->
</script>
Men i Netscapes javascript konsoll lämnas denna säkerhetsvarning:
Security Error: Content at wyciwyg://0/file:///C:/Documents%20and%20Settings/Sune/Skrivbord/NYASTE/suneGall2/Temp$$$.html may not load or link to file:///C:/Documents%20and%20Settings/Sune/Skrivbord/NYASTE/suneGall2/Temp$$$.html.
Någon som kan förklara och om så möjligt ge mig tips hur jag löser det på annat sätt?
dectgapMedlem sedan sep. 20021 655 inlägg Till att börja med:
I IE triggas inte Image.onload ifall bilden redan ligger i cachen, så det man får göra är att först kolla efter ifall bilden redan finns laddad. I så fall kör man funktionen för att visa dimensionerna direkt; i annat fall får man vänta till bilden är färdigladdad.
Det kan du skriva så här:
if(oImage.complete)
getSize();
else
oImage.onload = getSize;
Vad det gäller felmeddelandet har jag inge sådana problem, men jag gissar att det har att göra med att du använder document.close.
Testa följande:
<script type="text/javascript">
var i;
var oImage = new Image;
oImage.src = 'images/1.gif';
if(oImage.complete)
getSize(oImage);
else
oImage.onload = function() { getSize(this) };
function getSize(imgObj) {
document.write('width:'+imgObj.width+' height:'+imgObj.height);
document.close();
}
</script>
Funktionen getSize fick göras om lite för att passa de två typerna av anrop som kan göras.
JojoxxMedlem sedan juni 20004 308 inlägg
dectgap skrev:
I IE triggas inte Image.onload ifall bilden redan ligger i cachen...
Jag skulle tippa på att det är ett timing-problem. Definierar du onload-eventet innan du laddar bilden genom att ändra src-egenskapen (och inte tvärs om som i exemplet) så säger min erfarenhet att det fungerar. (Exempel)
dectgapMedlem sedan sep. 20021 655 inlägg Det stämmer mycket bra. Min lösning blev alltså onödigt komplicerad.
En kortare form blir då
<script type="text/javascript">
var i;
var oImage = new Image;
oImage.onload = getSize;
oImage.src = 'images/1.gif';
function getSize() {
document.write('width:'+this.width+' height:'+this.height);
}
</script>
Ett problem nu är att om bilden inte finns i cachen kommer getSize mycket riktigt att "skjutas upp", och kommer att skrivas ut på fel plats i dokumentet eller ersätta dokumentets innehåll.
Låt hellre getSize se ut så här:
function getSize() {
document.getElementById("bildruta").innerHTML = 'width:'+this.width+' height:'+this.height;
}
Eller lite mer standardiserat:
function getSize() {
document.getElementById("bildruta").appendChild( document.createTextNode('width:'+this.width+' height:'+this.height) );
}
Ett element med id "bildruta" måste finnas i dokumentet, och bör ligga före script-elementet för att det inte ska bli problem med att #bildruta inte finns när oImage.onload triggas.
SuneMedlem sedan nov. 1999367 inlägg Jag ska villigt erkänna att jag inte hänger med i ert resonemang riktigt. Kan bara konstatera att detta funkar i Netscape men inte i Explorer (kör Mac)
Det roliga var att det var precis tvärtom innan men nu har jag strulat bort den koden... ska se om jag hittar den igen.
<html>
<head>
<title>Get WIdth and Height</title>
<script language="JavaScript1.2"><!--
var i;
var oImage = new Image;
oImage.onload = getSize;
oImage.src = 'images/1.gif';
function getSize() {
document.write('width:'+this.width+' height:'+this.height);
}
// -->
</script>
</head>
<body>
</body>
</html>
dectgapMedlem sedan sep. 20021 655 inlägg Om du ändrar funktionen getSize till
function getSize() {
alert('width:'+this.width+' height:'+this.height);
}
får du då upp ett alert-meddelande med dimensionerna?
dectgapMedlem sedan sep. 20021 655 inlägg Jag har ingen möjlighet att använda IE på Mac, så jag gissar bara nu.
Om du i getSize byter ut this till oImage, blir det någon skillnad då?
SuneMedlem sedan nov. 1999367 inlägg om du menar this.onload = getSize; istället för oImage.onload = getSize;så är det ingen skillnad
dectgapMedlem sedan sep. 20021 655 inlägg Nä, jag menar om du skriver funktionen getSize så här
function getSize() {
alert('width:'+oImage.width+' height:'+oImage.height);
}
SuneMedlem sedan nov. 1999367 inlägg Detta funkar i Netscape 7.02 Mac men inte i IE då blir resultatet som skrivs ut på sidan 1x0 istället för bildens riktiga bredd och höjd.
Kan detta hjälpa något, för de som förstår sig på bättre än jag?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Bredd x höjd</title>
<script><!--
// Works in Netscape 7.02 but not in NN4.7 or IE5 on a Mac
var img=new Image()
img.src="images/1.gif";
function imgSize() {
if(img.complete) {
document.write(''+img.width+'x'+img.height+'');
} else {
img.onload = imgSize() ;
}
}
// -->
</script>
</head>
<body onload="imgSize();">
</body>
</html>
dectgapMedlem sedan sep. 20021 655 inlägg Använd inte document.write för att skriva ut saker på sidan efter att den har laddats klart.
Testa att skriva om skriptet till
<script type="text/javascript" language="javascript"><!--
// Works in Netscape 7.02 but not in NN4.7 or IE5 on a Mac
var img=new Image()
img.src="images/1.gif";
var imgDataHolder = "imgData";
function imgSize() {
var obj,
imgData = "x:" + img.width + ", y:" + img.height;
if(img.complete) {
if(document.getElementById) {
obj = document.getElementById(imgDataHolder);
obj.innerHTML = imgData;
} else if(document.all) {
obj = document.all[imgDataHolder];
obj.innerHTML = imgData;
} else if(document.layers) {
obj = document.layers[imgDataHolder];
obj.document.open();
obj.document.write(imgData);
obj.document.close();
}
} else {
img.onload = imgSize;
}
}
// -->
</script>
Och lägg samtidigt till ett element med id=imgData någonstans i dokumentet, t ex
<span id="imgData"></span>
SuneMedlem sedan nov. 1999367 inlägg Tack igen dectgap för att du försöker hjälpa mig.
Din sista hjälp funkar i netscape men inte i IE (sitter vid en pc idag).
Lite intressant att man inte ska använda document.write för att skriva ut saker om sidan laddat klart. Det visste jag inte, men jag är alltid villig att lära mig nytt. Finns det en enkel och kort förklaring till varför?
document.write lägger till något till dokumentet innan det webbläsaren renderar sidan. Därför kommer istället innehållet skrivas över när man använder det efter att sidan har laddats.
För att nämna en annan sak så finns inte objektet document.body tillgängligt förrän sidan är färdigladdad.
dectgapMedlem sedan sep. 20021 655 inlägg
Sune skrev:
Din sista hjälp funkar i netscape men inte i IE (sitter vid en pc idag).
Jaså?
Jag testade nämligen med IE4, IE5, IE5.5 och IE6 på PC och skripet fungerade i samtliga versioner.
Vilken version var det du hade problem med?
Sune skrev:
Lite intressant att man inte ska använda document.write för att skriva ut saker om sidan laddat klart. Det visste jag inte, men jag är alltid villig att lära mig nytt. Finns det en enkel och kort förklaring till varför?
Helt enkelt för att du inte kan.
Om du ger dig på att försöka skriva ut något med document.write när sidan är färdigladdad kommer hela innehållet att ersättas med det du skriver ut genom document.write.
Som du kan se skrev jag i föregående inlägg följande:
} else if(document.layers) {
obj = document.layers[imgDataHolder];
obj.document.open();
obj.document.write(imgData);
obj.document.close();
Det är för Netscape 4 och de har ett lite annorlunda sätt att se på det hela, men det är inte så konstigt med tanke på att det är en gammal webbläsare. Så att man använder document.write där, även om sidan är färdigladdad, hör till undantagen, och beror på att "lagret" ses som ett dokument i sig.
För övrigt, när jag är klar med galleriskriptet så kan du titta på det, där visar jag en bra lösning, (som också är helt annorlunda mot din nuvarande) på detta problem.
Men mitt generella råd är: Dumpa Netscape 4! Det finns inte många som använder den längre, och den skiljer sig såpass från gängse standard att det oftast inte lönar sig att göra speciallösningar för den.
För övrigt verkar skriptet fungera korrekt även i Netscape 4.74.
SuneMedlem sedan nov. 1999367 inlägg Med risk för att bli sedd som jobbig... men jag vill komma till klarhet med detta för mig problem.
Det fungerar i Netscape 7.02 på en Mac
Fungerar inte i IE 5 Mac : debuggscriptet säger nullvärde på obj
Bör förklaras att IE 5 Mac är inte samma som IE 5 Win snarare som versionen innan (4.5?) men detta är den sista versionen IE som utvecklas för MacOS 9 vilket jag sitter på. Det finns några till som jag använder detta och därför är jag lite nyfiken...
<html>
<head>
<title>width n height</title>
<script type="text/javascript" language="javascript"><!--
// Works in Netscape 7.02 but not in NN4.7 or IE5 on a Mac
var img=new Image()
img.src="images/1.gif";
var imgDataHolder = "imgData";
// DEBUGGER FUNCTION ***********************************
onerror = errWindow
function errWindow(errMsg,location,lineNum) {
debugWin=window.open('','debugWin','height=200,width=200,resize=yes')
debugWin.document.write('Error at line: '+lineNum+'<br>')
debugWin.document.write('The error was: '+errMsg)
debugWin.document.close()
return true
}
/*
Visas i IE5 Mac
The error was: 'null' är inte ett objekt
Visas i NN4.75 Mac:
The error was: obj has no properties
*/
//******************************************************
function imgSize() {
var obj,
imgData = "x:" + img.width + ", y:" + img.height;
if(img.complete) {
if(document.getElementById) {
obj = document.getElementById(imgDataHolder);
obj.innerHTML = imgData;
} else if(document.all) {
obj = document.all[imgDataHolder];
obj.innerHTML = imgData;
} else if(document.layers) {
obj = document.layers[imgDataHolder];
obj.document.open();
obj.document.write(imgData);
obj.document.close();
}
} else {
img.onload = imgSize;
}
}
// -->
</script>
</head>
<body onload="imgSize();">
<span id="imgData"><span>
</body>
</html>
