nicht angemeldet
Problem mit JavaScript im Safari
MudGuard
JürgenBGuten Tag allerseits,
ich habe da ein Problem mit einer JS-Funktion im Safari (5.1.3) auf dem Mac (MacOS 10.7.3). Ich habe zur vorläufigen Reservierung einer Domain eine einfache Info-Site entworfen, auf der nach dem Öffnen der Site eine Animation (in diesen Fall ein Quicktime Movie / .mov) automatisch abgespielt werden soll. Das ganze habe ich per "object"-Tag zunächst wie folgt einfach in die Seite integriert:
<object data="coverani5.mov" type="video/quicktime" width="800" height="600">
<param name="src" value="bilder/coverani5.mov">
<param name="pluginspage" VALUE="http://quicktime.apple.com/">
<param name="autoplay" value="true">
<param name="kioskmode" value="true">
<param name="controller" value="false">
<!--[if !IE]> -->
<object type="video/quicktime" data="bilder/coverani5.mov"" width="800" height="600">
<param name="controller" value="false">
<param name="autoplay" value="true">
<param name="kioskmode" value="true">
</object>
<![endif]-->
</object>
Das ganze funktioniert auf dem Mac sowohl im Firefox, als auch im Safari tadellos, andere Browser, auch unter anderen BS, habe ich bisher noch nicht getestet.
Nun habe ich aber im Weiteren gelesen, das der IE allerdings wohl mit dem automatischen Auslösen der Anweisung so seine Probleme haben soll, was laut Elisabeth Castro in Problemen mit dem automatischen Start von ActiveX-Komponenten begründet liegen soll. Apple z.B. empfiehlt daher, das ganze in eine JavaScript-Funktion zu packen und diese dann per JS-Anweisung innerhalb des Site-Body aufzurufen um den Prozess automatisch auszulösen. Nun ich habe das einfach mal wie folgt umgesetzt:
1. externe Datei "animation.js" mit folgendem Inhalt angelegt:
function animation() {
document.write(
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="600">
<param name="src" value="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" />
<param name="autoplay" value="true" />
<param name="controller" value="false" />
<param name="cache" value="false" />
<param name="kioskmode" value="true" />
<!--[if !IE]> -->
<object type="video/quicktime" data="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" width="800" height="600">
<param name="pluginspage" VALUE="http://quicktime.apple.com/" />
<param name="autoplay" value="true" />
<param name="controller" value="false" />
<param name="kioskmode" value="true" />
<param name="cache" value="false" />
</object>
<!--<![endif]-->
</object>
);
}
2. HTML Datei mit folgendem Inhalt angelegt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
<meta name="robots" content="index">
<meta name="robots" content="follow">
<meta name="robots" content="all">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="language" content="de">
<meta http-equiv="content-language" content="de">
<title>Fegefeuer - Dortmund ... der neue Szene-Shop im Pott</title>
<script src="animation.js" type="text/javascript"></script>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #000000;
}
-->
</style>
</head>
<body>
<p align="center">
<script language="JavaScript" type="text/javascript">
animation();
</script>
</p>
</body>
</html>
Das ganze funktioniert im Firefox ohne Probleme, leider jedoch nicht im Safari. Dieser meldet im Debugger dann immer für die HTML-Datei:
jsani.htm:37ReferenceError: Can't find variable: animation
und für die JS-Datei meldet der Debugger dann weiter:
animation.js:3SyntaxError: Unexepted Token '<'
Kann mir jemand sagen, was ich eventuell falsch gemacht haben könnte?
-
Kann mir jemand sagen, was ich eventuell falsch gemacht haben könnte?
eventuell? Nö, wirklich falsch ist, dass du per write versuchst etwas, das kein String ist, auszugeben!
-
Kann mir jemand sagen, was ich eventuell falsch gemacht haben könnte?
eventuell? Nö, wirklich falsch ist, dass du per write versuchst etwas, das kein String ist, auszugeben!
Hmmm. ich bin Neuling in dem Bereich und habe die JS-Datei einfach nach dem Vorbild in einem "Fachbuch" zu der Problematik nachgebaut. Lediglich der Name der Funktion und die Dateinamen wurden geändert. Könntest Du mir eventuell bitte näher erläutern wie ich das ganze ändern müsste, damit es funktioniert?
-
Vorbild in einem "Fachbuch"
ich empfehle die weitere Lagerung des Fachbuchs in der Altpapiertonne
wie ich das ganze ändern müsste
http://de.selfhtml.org/javascript/objekte/document.htm#write@title=write erwartet als Parameter einen http://de.selfhtml.org/javascript/objekte/string.htm@title=String. Dieser ist gekennzeichnet durch " oder ' an Anfang und Ende.
-
Vorbild in einem "Fachbuch"
ich empfehle die weitere Lagerung des Fachbuchs in der Altpapiertonnewie ich das ganze ändern müsste
http://de.selfhtml.org/javascript/objekte/document.htm#write@title=write erwartet als Parameter einen http://de.selfhtml.org/javascript/objekte/string.htm@title=String. Dieser ist gekennzeichnet durch " oder ' an Anfang und Ende.Tja, so sah meine ursprünglicheFunktion aus:
function animation() {
document.write('<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="600">
<param name="src" value="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" />
<param name="autoplay" value="true" />
<param name="controller" value="false" />
<param name="cache" value="false" />
<param name="kioskmode" value="true" />
<!--[if !IE]> -->
<object type="video/quicktime" data="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" width="800" height="600">
<param name="pluginspage" VALUE="http://quicktime.apple.com/" />
<param name="autoplay" value="true" />
<param name="controller" value="false" />
<param name="kioskmode" value="true" />
<param name="cache" value="false" />
</object>
<!--<![endif]-->
</object>');
}... doch diese Variante funktionierte weder im Firefox noch im Safari.
-
... doch diese Variante funktionierte weder im Firefox noch im Safari.
Fehlermeldungen?
-
... doch diese Variante funktionierte weder im Firefox noch im Safari.
Fehlermeldungen?
Für die HTML-Datei ändert sich die Fehlermeldung nicht, für die JS-Datei meldet der Debugger dann:
animation.js:2SyntaxError: Unexepted EOF
-
... doch diese Variante funktionierte weder im Firefox noch im Safari.
Fehlermeldungen?
Ok, die Sache hat sich erledigt. Es lag an den Zeilenumbrüchen innerhalb des String. Ich habe es auf den Tip von Andreas hin geändert und nun funktioniert es auch wie gewünscht.
Danke für Deine Hilfe.
Gruss Jörg
-
-
Hi,
Tja, so sah meine ursprünglicheFunktion aus:
function animation() {
document.write('<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="600">
<param name="src" value="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" />Strings dürfen nicht über mehrere Zeilen gehen. Also entweder alles in eine Zeile, oder Einzelstrings mit + verketten oder Einzelstrings schreiben oder die Zeilenenden escapen.
... doch diese Variante funktionierte weder im Firefox noch im Safari.
Welch Wunder, die ist ja auch kaputt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Strings dürfen nicht über mehrere Zeilen gehen. Also entweder alles in eine Zeile, oder Einzelstrings mit + verketten oder Einzelstrings schreiben oder die Zeilenenden escapen.
... doch diese Variante funktionierte weder im Firefox noch im Safari.
Welch Wunder, die ist ja auch kaputt.
cu,
AndreasHmmmm, wie schon gesagt, JS und Scripting im Allgemeinen ist etwas mit dem ich mich bisher kaum beschäftigt habe. Bin auf Grund Deines Hinweises gerade noch mal in die Datei und habe sie wie folgt geändert:
function animation() {
document.write('<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="600">');
document.write('<param name="src" value="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" />');
document.write('<param name="autoplay" value="true" />');
document.write('<param name="controller" value="false" />');
document.write('<param name="cache" value="false" />');
document.write('<param name="kioskmode" value="true" />');
document.write('<!--[if !IE]> -->');
document.write('<object type="video/quicktime" data="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" width="800" height="600">');
document.write('<param name="pluginspage" VALUE="http://quicktime.apple.com/" />');
document.write('<param name="autoplay" value="true" />');
document.write('<param name="controller" value="false" />');
document.write('<param name="kioskmode" value="true" />');
document.write('<param name="cache" value="false" />');
document.write('</object>');
document.write('<!--<![endif]-->');
document.write('</object>');
}... in der Hoffnung Deine Worte richtig zu interpretieren. Tj was soll ich sagen, offenbar habe ich sie richtig verstanden, es hat im Anschluss dann sowohl im FF als auch im Safari funktioniert.
Danke für Eure Hilfe.
P.S.: Mir fehlt aus Ermangelung von Windows leider die Möglichkeit die Datei im IE zu testen. Wäre eventuell jemand von Euch so lieb, die Funktion im IE unter der URL: http://www.ebm-front-ruhr.de/fegefeuer/jsani.htm zu testen? Gerne auch in anderen Browsern und unter weiteren BS. Hierfür schon mal Danke im Voraus von mir.
-
Hallo joerghigert,
Windows 7, deine Seite läuft im aktuellen IE, FF, Opera und Safari.
Zur Stringverknüpfung:
var Text = "Hier geht es " + "weiter.";Gruß, Jürgen
-
Hallo joerghigert,
Windows 7, deine Seite läuft im aktuellen IE, FF, Opera und Safari.
Zur Stringverknüpfung:
var Text = "Hier geht es "
+ "weiter.";
> > Gruß, Jürgen > Hallo Jürgen, zunächst danke ich Dir für die Überprüfung in den genannten Browsern und natürlich für die Darstellung der Schreibweise einer Verknüpfung. Ich denke, die von mir gewählte Variante der Animation mittels Quicktime Movie auf der Site ist sicher nicht der Weisheit letzter Schluss, es hat nicht jeder Quicktime installiert. Doch funktioniert diese Variante auch auf dem iPhone, und dies war der Seiten-Inhaberin sehr wichtig. Flash wird auf diesem ja nicht unterstützt. Und einige Versuche in der HTML5 Schreibweise sind zuvor gescheitert. Im Moment schaue ich mich nach einem Muster für eine einfache und möglichst kompatible Lösung per Animation via JS oder besser noch via CSS um. Gerade per CSS sollte die Animation dann ja in allen einigermaßen aktuellen Browsern funktionieren, zumindest sofern der Browser CSS3 schon unterstützt. Ist letztlich doch irgendwie alles eine Crux ... einfache und vor allem standardisierte Lösungen scheint es im Moment offenbar nicht wirklich zu geben. Doch noch einmal zur Schreibweise ... Ich nehme an, das "var text" eine Variable, in diesem Fall, Namens "Text" ist. Muss ich diese innerhalb der Funktion "animation" definieren oder gesondert, also etwas so: var text = '<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="600">' +'<param name="src" value="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" />' +'<param name="autoplay" value="true" />' +'<param name="controller" value="false" />' +'<param name="cache" value="false" />' +'<param name="kioskmode" value="true" />' +'<!--[if !IE]> -->' +'<object type="video/quicktime" data="http://www.ebm-front-ruhr.de/fegefeuer/bilder/coverani5.mov" width="800" height="600">' +'<param name="pluginspage" VALUE="http://quicktime.apple.com/" />' +'<param name="autoplay" value="true" />' +'<param name="controller" value="false" />' +'<param name="kioskmode" value="true" />' +'<param name="cache" value="false" />' +'</object>' +'<!--<![endif]-->' +'</object>'; function animation() { } ... und wo müsste ich innerhalb der Funktion dann auf die Variable Text verweisen, innerhalb der geschwungenen Klammer? Wie müsste ich das ganze richtig schreiben? Sorry, was Scripting betrifft bin ich ein wirklicher DAU. Gruss Jörg-
Hallo joerghigert,
du bewegst dich auf sehr dünnem Eis, wenn du Techniken einsetzt, ohne Sie zu verstehen.
Zur Stringverknüpfung:
Mein Besispiel sollte dir nur Zeigen, wie man Strings verknüpft. In deinem Fall musst du den String nicht erst zwischenspeichern und dann ausgeben, das geht auch direkt:
document.write("..." +"..." +"...");zur Animation:
hast du schon mal versucht, das ganze als "Animiertes GIF" zu erstellen? Allerdings musst du dich dann auf 256 Farben beschränken.
Gruß, Jürgen
-
Hallo joerghigert,
du bewegst dich auf sehr dünnem Eis, wenn du Techniken einsetzt, ohne Sie zu verstehen.
Zur Stringverknüpfung:
Mein Besispiel sollte dir nur Zeigen, wie man Strings verknüpft. In deinem Fall musst du den String nicht erst zwischenspeichern und dann ausgeben, das geht auch direkt:
document.write("..."
+"..."
+"...");> > > zur Animation: > > hast du schon mal versucht, das ganze als "Animiertes GIF" zu erstellen? Allerdings musst du dich dann auf 256 Farben beschränken. > > Gruß, Jürgen > Hallo Jürgen, der Wunsch der Seiteninhaberin ist, das die Grösse der Animation unangetastet bleibt, die Darstellungsqualität der Animation möglichst hoch und die Animation selbst möglichst flüssig sei, um natürlich zu erscheinen. Dies lässt sich nicht ganz so einfach in Einklang bringend. Als animiertes GIF sieht das ganze doch recht grauslich aus, selbst bei vorheriger maximal möglicher und akzeptabler Farbreduktion in jedem der Einzelbilder. Am Ende ist die GIF-Datei noch dazu grösser als das Quicktime-Movie. Es sind wohl einfach zu viele Einzelbilder, wir reden hier über 152 Bilder im Format 800x600 Px für die gesamte Animation. Und der Versuch einzelne Bilder im GIF auszulassen wirkt am Ende sehr unnatürlich. Aus diesem Gründen bin ich auch eher skeptisch, was eine Umsetzung als Animation per JS oder in CSS betrifft. Ich denke es werden enorme Ladezeiten entstehen. Ich gebe Dir absolut recht, der Einsatz von Techniken ohne diese zu verstehen ist immer kritisch. Doch gilt dies nicht auch für viele andere Dinge im Leben, z.B. muss man den Umgang und die Bedienung eines Fahrrades oder Autos ja auch erst einmal verstehen lernen, bevor man es fahren kann. Der einfachste Weg -> gezeigt bekommen und selber probieren durch nachmachen. Mit der Zeit versteht man dann zumeist irgendwann auch die Funktionsweise der Technik dahinter, zumindest wenn man sich mit der Thematik immer auch mal auseinandersetzt. Und genau dies versuche ich in Bezug auf JS durch das Lesen entsprechender Literatur, durch Nachbauen von Scripten aus dem Netz und durch meine Fragen hier im Forum nach und nach auch hinzubekommen. Doch stehe ich gerade am Anfang. Von daher bin ich, wie wohl jeder Anfänger, stets über ausführliche Erläuterungen und Beispiele sehr dankbar. Doch ist es am Anfang auch immer recht schwer, sich in ein Thema hinein zu versetzen, das man noch nicht grundlegend versteht. Was mein Problem an sich betrifft, habe ich verstanden, das ich den Text bzw. Quellcode innerhalb der "document.write"-Anweisung als Folge (String) schreiben, den Inhalt des Strings in Anführungszeichen setzen und das ich diesen entweder durchgängig hintereinander weg (bei viel Code oder Text recht unübersichtlich) schreiben muss oder eben mit "+" verknüpfen kann. Eines fiel mir auf: Du setzt als Anführungszeichen immer ein doppeltes zu Beginn und Ende des Strings. Jetzt beinhaltet mein Qellcode diese jedoch auch doppelte Anführungszeichen für die Parameter, Sourcepfad usw.. Muss ich in diesem Fall mit einfachen Anführungszeichen am Beginn und Ende des jeweiligen String arbeiten? In einem Buch wird auf diesen Umstand explizit hingewiesen, ist das so richtig? Gruss Jörg-
Hallo joerghigert,
zum "Animierten GIF"
das war nur eine Idee. Ich habe mal ein kurzes Video in ein animiertes GIF umgewandelt, vor über 10 Jahren lief das in jedem Browser:
Zum Lernen
ich wollte dich auch nur warnen. Zum Üben kannst du alles wild ausprobieren, online, vor allem auf "Kundenseiten", solltest du nur verwenden, was du auch verstanden hast.Zur Quotierung
man kann beides benutzen: "Text" und 'Text'. Die Anführungszeichen müssen nur paarweise zusammenpassen. Man kann Quotierungen auch verschachteln: "Text und 'Text im Text'". Und wenn das nicht reicht, geht auch noch ".Gruß, Jürgen
-
Hallo joerghigert,
zum "Animierten GIF"
das war nur eine Idee. Ich habe mal ein kurzes Video in ein animiertes GIF umgewandelt, vor über 10 Jahren lief das in jedem Browser:Zum Lernen
ich wollte dich auch nur warnen. Zum Üben kannst du alles wild ausprobieren, online, vor allem auf "Kundenseiten", solltest du nur verwenden, was du auch verstanden hast.Zur Quotierung
man kann beides benutzen: "Text" und 'Text'. Die Anführungszeichen müssen nur paarweise zusammenpassen. Man kann Quotierungen auch verschachteln: "Text und 'Text im Text'". Und wenn das nicht reicht, geht auch noch ".Gruß, Jürgen
Hallo Jürgen,
danke für die Antwort zum richtigen Quotieren, hab die Möglichkeiten direkt mal im Hinterkopf abgespeichert. Wenn ich Deine Antworten und die Hinweise in den Büchern in einen Kontext bringe, verstehe ich die unterschiedlichen Möglichkeiten der nutzbaren Anführungszeichen so: Wenn der Inhalt des String Anführungszeichen einer bestimmten Art bereits beinhaltet, es besser ist für die Quotierung stets eine alternative Art zu wählen.
Wie gesagt, animiertes GIF funktioniert in diesem Fall leider nur mit deutlichen Einbussen in der Bildqualität. Von Seiten der Inhaberin völlig inakzeptabel, von daher suchte ich dann nach einer anderen Lösung. Eine Videosequenz schien mir als Alternative recht geeignet, mit Blick auf die iPhone- bzw. iOS-Problematik war dann ein Quicktime-Format das Format der Wahl. Natürlich war mir die Problematik des eventuell nicht vorhandenen Quicktime-Plugin beim User von Beginn an bewusst, doch gilt dies meines Wissens derzeit wohl eigentlich für jedes Videoformat, das in eine Website eingebunden werden soll. Selbst ein Flash-Plugin hat auch nicht jeder User auf seinem System installiert. Bin allerdings am überlegen, ob ich nicht dennoch auch das FLV-Format zusätzlich als Alternative implementieren sollte. Dies dürfte die Wahrscheinlichkeit erhöhen, das die Animation beim User angezeigt wird, ohne erst ein Plugin installieren zu müssen. Suche diesbezüglich gerade nach einer Lösung dies auch per JS möglich zu machen, sprich auf diesem Weg zu prüfen, ob und welches Plugin beim User installiert ist und dann die entsprechende Datei laden zu lassen. Vielleicht hast Du ja einen Tip für mich, wo ich diesbezüglich mal reinschauen sollte.
Was das Lernen betrifft, arbeite und experimentiere ich immer erst lokal. Wenn eine Seite dann in meinen lokal installierten Browsern funktioniert, lade ich sie (zunächst getarnt, wie heute mit der jsani.htm) auf den entsprechenden Server und teste sie nochmals. Funktioniert auch hier alles, wird die Seite umbenannt und eingebunden. Ich arbeite allerdings nicht für Kunden, sondern setze nur eigene Projekte um. Im konkreten Fall allerdings arbeite ich für meine Frau und ihr zukünftiges Ladengeschäft. Im Augenblick hat sie sich erst einmal nur die Domain gesichert und möchte, das bei Aufruf der Selbigen die Animation zu sehen ist.
Gruss Jörg
-
-
-
-
-
-
-
Strings dürfen nicht über mehrere Zeilen gehen. Also entweder alles in eine Zeile, oder Einzelstrings mit + verketten oder Einzelstrings schreiben oder die Zeilenenden escapen.
... doch diese Variante funktionierte weder im Firefox noch im Safari.
Welch Wunder, die ist ja auch kaputt.
cu,
AndreasHallo Andreas,
wie schon in meinem vorherigen Posting gesagt, danke ich Dir für Deinen Tip, ich hab es darauf hin noch einmal überarbeitet und es hat funktioniert. Die Variante mit dem "alles in eine Zeile" finde ich sehr unübersichtlich, ich habe daher den Weg mit "document.write('xxx');" für jede einzelne Zeile gewählt. Doch ist dies bei grossen Dateien sehr aufwendig und sicher auch eine Quelle von Fehlern. Ich wäre Dir daher sehr dankbar, wenn Du mir vielleicht ein kurzes Beispiel für eine Verkettung mit "+" darstellen könntest und mir den Begriff "escapen" etwas näher beleuchten könntest.
Wie gesagt, ich stehe ganz am Anfang ... Danke schon mal im Voraus.
Gruss Jörg
-
-
-
-
-