Internet Explorer macht kein setInterval von Norbert Kölln, 21.02.2007 08:57

Internet Explorer macht kein setInterval

Jochen 20.02.2007 21:15

javascript

Moin!
Ich habe ein Problem mit dem Internet Explorer. Er will kein setInterval machen. Und zwar habe ich mehrere Funktionen. Die Hälfte der Funktionen ruft die anderen mit setInterval auf. Und da spielt der IE nicht mit. Woran liegt das? Ich habe für euch den kompletten Quellcode. Ich hoffe ihr könnt damit etwas anfangen. Es ist bei allen Funktionen das gleiche Problem. Der IE macht bei jedem setInterval Probleme. Warscheinlich reicht es schon, wenn man bei einer Funktion das Problem gefunden hat.
Hier die HTML-Datei:
#######################################################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
  
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <meta http-equiv="Content-Script-Type" content="text/javascript">  
  
 <style type="text/css">  
body{  
 font-family: Georgia, "Times New Roman", Times, serif;  
}  
h2{  
 border-bottom-style: dotted;  
 border-bottom-width: 1px;  
 border-bottom-color: #222222;  
 color: #222222;  
 padding-bottom: 0.2em;  
 margin-right: 5em;  
 font-size: 1.8em;  
}  
p#scrollHeight{  
 width: 300px;  
 text-align: justify;  
}  
div.text{  
 width: 200px;  
 margin-left: 8em;  
 background-color: #222222;  
 padding: 0 3px 0 3px;  
 color: #FFFFFF;  
 font-size: 0.8em;  
 overflow: hidden;  
}  
 </style>  
 <script type="text/javascript" src="test.js"></script>  
</head>  
  
<body>  
 <p>  
  Diese Funktionen funktionieren uneingeschränkt in folgenden Browsern:  
 </p>  
 <ul>  
  <li>Firefox 2.01</li>  
  <li>Opera 8.52</li>  
  <li>Netscape 7.1</li>  
  <li>Netscape 8.1</li>  
 </ul>  
 <h2>Ein Div ausklappen (height)</h2>  
 <p>  
  <a href="#" onclick="OpenBoxHeight('openBoxHeight', '225', 'px');return false">Komplett ausklappen</a> | <a href="#" onclick="OpenBoxHeight('openBoxHeight', '95', 'px');return false">Halb ausklappen</a>  
 </p>  
 <div style="height: 200px;">  
  <div id="openBoxHeight" class="text" style="display:none; height: 0px;">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
   sed do eiusmod tempor incididunt ut labore et dolore magna  
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
   ullamco laboris nisi ut aliquip ex ea commodo consequat.  
   Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit  
   anim id est laborum.  
  </div>  
 </div>  
 <h2 style="margin-top:3em;">Ein Div einklappen (height)</h2>  
 <p>  
  <a href="#" onclick="CloseBoxHeight('closeBoxHeight', '225', 'px');return false">Komplett einklappen</a> | <a href="#" onclick="CloseBoxHeightHalf('closeBoxHeight', '95', 'px');return false">Halb einklappen</a>  
 </p>  
  
 <div style="height: 230px;">  
  <div id="closeBoxHeight" class="text" style="display:block; height:225px;">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
   sed do eiusmod tempor incididunt ut labore et dolore magna  
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
   ullamco laboris nisi ut aliquip ex ea commodo consequat.  
   Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit  
   anim id est laborum.  
  </div>  
 </div>  
  
 <h2 style="margin-top:3em;">Ein Div einklappen (width)</h2>  
 <p>  
  <a href="#" onclick="CloseBoxWidth('slideWidthOpen', '200', 'px');return false">Komplett einklappen</a> |  
  <a href="#" onclick="CloseBoxWidthHalf('slideWidthOpen', '200', 'px');return false">Halb einklappen</a>  
 </p>  
  
 <div id="slideWidthOpen" class="text" style="display:block; height:225px; width:200px">  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  sed do eiusmod tempor incididunt ut labore et dolore magna  
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse  
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
  cupidatat non proident, sunt in culpa qui officia deserunt mollit  
  anim id est laborum.  
 </div>  
  
  
 <h2 style="margin-top:3em;">Ein Div einklappen (width und height)</h2>  
 <p>  
  <a href="#" onclick="CloseBoxComplete('slideCloseBoxComplete', '200', '225', 'px');return false">Komplett einklappen</a> |  
  <a href="#" onclick="CloseBoxHalf('slideCloseBoxComplete', '200', '225', 'px');return false">Halb einklappen</a>  
 </p>  
 <div style="height: 230px;">  
  <div id="slideCloseBoxComplete" class="text" style="display:block; height:225px; width:200px">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
   sed do eiusmod tempor incididunt ut labore et dolore magna  
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
   ullamco laboris nisi ut aliquip ex ea commodo consequat.  
   Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit  
   anim id est laborum.  
  </div>  
 </div>  
</body>  
</html>

#######################################################################
Und hier die javascript-Datei:
#######################################################################

var i = 0;  
var a = 0;  
  
// Ein Div einklappen (height) ganz  
function CloseBoxHeight(box, height, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = height;  
 closeBoxHeight = window.setInterval(  
  function() {  
   slideHeightClose(box, height , me)  
   }, 20);  
}  
function slideHeightClose(box, height, me){  
 document.getElementById(box).style.height = i + me;  
 document.getElementById(box).style.display = "block";  
 i = i - 5;  
 if( i <= 0) {  
  window.clearInterval(closeBoxHeight);  
  document.getElementById(box).style.visibility = "hidden";  
 }  
}  
  
  
// Ein Div einklappen (height) halb  
function CloseBoxHeightHalf(box, height, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = 255;  
 closeBoxHeight = window.setInterval(  
  function() {  
   slideHeightCloseHalf(box, height , me)  
   }, 20);  
}  
function slideHeightCloseHalf(box, height, me){  
 document.getElementById(box).style.height = i + me;  
 document.getElementById(box).style.display = "block";  
 i = i - 5;  
 if( i <= 95) {  
  window.clearInterval(closeBoxHeight);  
 }  
}  
  
  
// Ein Div ausklappen (height) ganz und halb  
function OpenBoxHeight(box, height, me){  
 i = 0;  
 openBoxHeight = window.setInterval(  
  function() {  
   slideHeightOpen(box, height , me)  
   }, 20);  
}  
function slideHeightOpen(box, height, me){  
 document.getElementById(box).style.height = i + me;  
 document.getElementById(box).style.display = "block";  
 i = i + 5;  
 if( i >= height ){  
  window.clearInterval(openBoxHeight);  
  i = 0;  
 }  
}  
  
// Ein Div einklappen (width) ganz  
function CloseBoxWidth(box, width, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = width;  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxWidth(box, width , me)  
   }, 20);  
}  
function slideCloseBoxWidth(box, height, me){  
 document.getElementById(box).style.width = i + me;  
 i = i - 5;  
 if( i <= 0 ){  
  window.clearInterval(slideWidthOpen);  
  document.getElementById(box).style.visibility = "hidden";  
 }  
}  
  
// Ein Div einklappen (width) halb  
function CloseBoxWidthHalf(box, width, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = width;  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxWidthHalf(box, width, me)  
   }, 20);  
}  
function slideCloseBoxWidthHalf(box, height, me){  
 document.getElementById(box).style.width = i + me;  
 i = i - 5;  
 if( i <= 95 ){  
  window.clearInterval(slideWidthOpen);  
 }  
}  
  
  
// Ein Div einklappen (width und height) ganz  
function CloseBoxComplete(box, width, height, me){  
 i = width;  
 a = height;  
 document.getElementById(box).style.visibility = "visible";  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxComplete(box, width, height, me)  
   }, 20);  
}  
function slideCloseBoxComplete(box, width, height, me){  
 document.getElementById(box).style.width = i + me;  
 document.getElementById(box).style.height = a + me;  
 document.getElementById(box).style.visibility = "visible";  
 i = i - 5;  
 a = a - 5;  
 if( i <= 0 ){  
  window.clearInterval(slideWidthOpen);  
  document.getElementById(box).style.visibility = "hidden";  
 }  
}  
  
// Ein Div einklappen (width und height) halb  
function CloseBoxHalf(box, width, height, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = width;  
 a = height;  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxHalf(box, width, height, me)  
   }, 20);  
}  
function slideCloseBoxHalf(box, width, height, me){  
 document.getElementById(box).style.width = i + me;  
 document.getElementById(box).style.height = a + me;  
 i = i - 5;  
 a = a - 5.625;  
 if( i <= 100 ){  
  window.clearInterval(slideWidthOpen);  
 }  
}

#######################################################################

Vielen Dank für die Mühen, wenn ihr euch meinen Quellcode anschaut. Jochen

Beitrag melden

– Informationen zu den Bewertungsregeln

Internet Explorer macht kein setInterval
Norbert Kölln 21.02.2007 08:57

javascript
– Informationen zu den Bewertungsregeln
Moin, moin!

So ein Problem hatte ich schon mal mit Firmenrechnern: Irgend eine Schutzeinrichtung hat alle JavaScripte deaktiviert, die z. B. die Funktionsaufrufe windows.setInterval, windows.clearInterval oder windows.setTimeout enthielten.

Kann es bei Dir ein ähnliches Problem sein? Ich umging es, indem ich statt der direkten Aurufe Befehle wie
eval("window.set"+"Interval('animation()',1500);");
verwendet habe. So wurden die verdächtigen Strings nicht mehr gefunden / herausgefiltert und über einen Umweg ausgeführt.

Alles klar?

Norbert
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Internet Explorer macht kein setInterval
  
  Struppi Homepage des Autors 21.02.2007 10:00
  
  javascript
  +2 Informationen zu den Bewertungsregeln
  Kann es bei Dir ein ähnliches Problem sein? Ich umging es, indem ich statt der direkten Aurufe Befehle wie
  eval("window.set"+"Interval('animation()',1500);");
  verwendet habe. So wurden die verdächtigen Strings nicht mehr gefunden / herausgefiltert und über einen Umweg ausgeführt.
  
  eval ist evil!
  
  Und wie so oft, hier auch überhaupt nicht nötig.
  window['set' + 'Timeout']('animation()',1500)
  
  Struppi.
  
  --
  Javascript ist toll (Perl auch!)
  Beitrag melden
  
  +2
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Internet Explorer macht kein setInterval
Axel Richter 21.02.2007 09:35

javascript
+1 Informationen zu den Bewertungsregeln
Hallo,

Ich habe ein Problem mit dem Internet Explorer. Er will kein setInterval machen. Und zwar habe ich mehrere Funktionen. Die Hälfte der Funktionen ruft die anderen mit setInterval auf. Und da spielt der IE nicht mit. Woran liegt das?

Der IE will nicht "kein setInterval machen", er hat eion Problem mit deiner Namensvergabe. Beispielsweise hast Du eine globale Variable openBoxHeight für Dein Interval _und_ gleichteitig ein DIV mit der ID "openBoxHeight". Das bringt im IE Namenskonflikte.

<div id="openBoxHeight" class="text" style="display:none; height: 0px;">

^diese ID ist problematisch

// Ein Div ausklappen (height) ganz und halb
function OpenBoxHeight(box, height, me){
i = 0;
openBoxHeight = window.setInterval(

^im Zusammenhang hiermit.

1. Nenne die ID _nicht_ ganau so, wie JavaScript Variablen, Objekte und Funktionen.

2. Deklariere _alle_ globale Variablen auch mit var am Anfang des Scripts, nicht einfach so mitten im Script.

viele Grüße

Axel
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Jochen: Internet Explorer macht kein setInterval