JavaScript Code (.js) einbinden in Artikel

**Lengen1971** · 29.07.2010, 11:38

Hi,
ich muß in einem Artikel unterscheiden, ob ein Flashfilm oder alternativ ein Bild angezeigt wird, wenn der Flashplayer nicht installiert ist. Hierzu gibt es von Adobe das Detection-Tool. Wie kann ich diese .js-Datei in meinen Artikel einbinden?

Danke und Gruß
Michael

**Lengen1971** · 29.07.2010, 12:20

sorry, gefunden:

über Themes, Seitenlayout, zusätzl. <head>..

**Wolf Larsen** · 07.08.2011, 21:18

Hallo Zusammen,

was macht man, wenn man einen Aufruf an einer bestimmten Stelle braucht?
Ich möchte eine Umblättern-Software für PDFs aufrufen.

Eine Software generiert

- einen Datei-Ordner
- einen Bilder-Ordner
- einen Flash-Film
- und eine index.html-Seite

Ohne CMS lässt sich alles prima aufrufen.

In der Index-Seite ist eigentlich nur ein Javascript:

HTML-Code:

	<script language="JavaScript" type="text/javascript">
	
	function getURLParam(strParamName){
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("?") > -1 ){
      var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
      var aQueryString = strQueryString.split("&");
      for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
        if ( 
  aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
          var aParam = aQueryString[iParam].split("=");
          strReturn = aParam[1];
          break;
        }
      }
    }
    return unescape(strReturn);
  }

 document.write(
    '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\n'+
    '  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"\n'+   
    '  WIDTH="100%" HEIGHT="100%" id="flashMovie" align="middle">\n'+
    '  <PARAM NAME="allowScriptAccess" value="sameDomain" />\n'+
  	'  <PARAM NAME="allowFullScreen" value="true" />\n'+
    '  <PARAM NAME=movie '+
    '    VALUE="movie.swf?pageNumber='+getURLParam('pageNumber')+'" />\n'+
    '  <PARAM NAME=quality VALUE=high />\n'+
    '  <PARAM NAME=bgcolor VALUE=#ffffff />\n'+
    '  <PARAM NAME=scale VALUE=noscale />\n'+
    '  <EMBED src="movie.swf?pageNumber=' + getURLParam('pageNumber') + '"' +
    '    bgcolor=#ffffff WIDTH="100%" HEIGHT="100% '+
    '    quality="high"' +
    '    scale="noscale"' +
    '    name="flashMovie"' +
    '    allowFullScreen="true"' +
    '    TYPE="application/x-shockwave-flash"'+
    '  />\n'+
    '</OBJECT>\n');
	</script>

Idealerweise möchte ich diesen Ordner einfach in tl-files legen und das Flash einzeln oder über das Script aufrufen. Nur muss man ja irgendwie den Pfad anpassen, schätze ich. Ich habe es bis jetzt nicht geschafft, es richtig angezeigt zu bekommen

Dankeschön für Tipps,
Wolf

**soweit_ok** · 08.08.2011, 13:26

Zitat von Wolf Larsen

was macht man, wenn man einen Aufruf an einer bestimmten Stelle braucht?
Ich möchte eine Umblättern-Software für PDFs aufrufen.
Eine Software generiert
- einen Datei-Ordner
- einen Bilder-Ordner
- einen Flash-Film
- und eine index.html-Seite
Ohne CMS lässt sich alles prima aufrufen.
In der Index-Seite ist eigentlich nur ein Javascript:
.....

Hallo Seewolf :-)

Grundsätzlich kannst Du das mittels Inserttags vom Typ "file" hinbekommen, welche Du in HTML-Module platzierst. Das Script packst Du in den Ordner templates. Da ist es updatesicher und braucht im Inserttag außerdem keine Pfadangabe, weil Contao es dort automatisch findet. Wo Du den Datenordner hinlegst, ist egal, wenn der Pfad korrekt übergeben wird. Die function getURLParam(strParamName) ist für diesen Weg eigentlich überflüssig, weil Du dem Inserttag beliebige Parameter mitgeben kannst, die sich dann im Script, wenn es als PHP-File gespeichert wird, mit PHP und $GET direkt im Objektaufruf substituieren lassen. Dein generischerer Ansatz wird aber so ohne Anpassungen innerhalb von Contao zumindest mit einer gewissen Wahrscheinlichkeit nicht funktionieren, jedenfalls vermute ich das.

Es würde jedoch auf jeden Fall gehen, wenn Du anstelle der Parameter-Auswertungen durch JS im Objektaufruf <PARAM NAME=bgcolor VALUE=#ffffff /> durch die PHP-Anweisungen $_GET['param'].'='.$_GET['val'] bzw. am Beispiel der Zuweisung einer Hintergrundfarbe 'bgcolor = '.$_GET['bgcolor_val'] ersetzt.

Relevanter Codeauszug als Praxisbeispiel aus einem Scipt von mir, das beliebige Einbindungen automatisiert und insbesondere komplexe Third Party PHP-Scripte perfekt in Contao und Contao-Layouts integriert, so dass die verschiedenen Programmteile durch die Contao-Navigation gesteuert werden und sich automatisch skalierend und ansonsten mit JS-Fallback wie sonstige Contao-Inhaltselemente/-module verhalten und auch mit diesen gemixt werden können. Danach nicht mehr benötigte Scriptelemente wie Navi, Header, Footer werden dann einfach mit CSS ausgeblendet. Das nur nebenbei. Der für Dich interessante Codeauszug zur Einbindung sonstiger Objekte ist eher eine kleine Nebenaufgabe dieses Scripts :

Code:

<?php
switch ($_GET['method']) {
  case 'obj':
    echo '<!--[if IE]>'.
            '<'.$_GET['method'].'ect id="'.$_GET['id'].
                '" classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="'.
                $_GET['path'].$_GET['scope'].'?'.$_GET['param'].'='.$_GET['val'].
                '" style="margin-left:-2px;margin-bottom:-24px;margin-top:-7px;width:'.$_GET['width'].';
                min-height:'.$_GET['height'].'px;border:2;overflow:hidden;">
                <p>Objekt kann nicht angezeigt werden!</p>
            </object>
          <![endif]-->
          <!--[if !IE]> <-->'.
            '<'.$_GET['method'].'ect id="'.$_GET['id'].
                '" type="text/html" data="'.$_GET['path'].$_GET['scope'].'?'.$_GET['param'].'='.
                $_GET['val'].'" style="width:'.$_GET['width'].';min-height:'.$_GET['height'].
                'px;border:0;overflow:hidden;margin-bottom:-24px;margin-top:-7px;">
                <p>Objekt kann nicht angezeigt werden!</p>
            </object>
          <!--> <![endif]-->';
    break;
  case 'ifr':
          .......
Ab hier erfolgen die Einbindung von IFrame-Objekten, welche die Höhe automatisch an 
beliebige dynamische Ausgaben anpassen, und noch einige andere Dinge, die für Deine 
Aufgabenstellung nicht relevant sind.

Du müsstest natürlich die für Deinen Objekttyp passende ClsId verwenden und dementsprechend auch die Parameter des Beispiels durch die von Dir benötigten ersetzen. Das ebenfalls auf Deinen Anwendungsfall anzupassende Contao-Inserttag zum obigen Objekttyp:

Code:

{{file::obj_include.php?method=obj&path=objektpfad&id=CSS-Id&scope=objektdateiname&param=0&val=0&width=100%&height=600}}

Ich hoffe, das konnte Dir ein paar Anregungen zur Lösung Deiner Aufgabenstellung geben. Vielleicht bringst Du Dein Script in ähnlicher Art auch mit nur wenigen Anpassungen in Contao zum Laufen, musst Du halt mal ausprobieren. Nach meiner Einschätzung wäre die Änderung Deines Scriptcodes zur Parameterverarbeitung in obiger Art aber auch kein großes Problem und recht schnell zu machen. Sicher ist jedenfalls, meine Lösung funktioniert tadellos - ist auf einer Kunden-Webseite zur vollsten Zufriedenheit im Einsatz. Ausgerechnet den von Dir gebrauchten Zweig benötigte der Kunde jedoch nicht, weshalb ich für´s Testen bislang weniger Zeit aufwändete als bei den anderen Programmzweigen. Läuft ebenfalls korrekt, erfordert aber noch ein paar geringfügige optische layoutspezifische Crossbrowser-Anpassungen des CSS.

Ein paar Javascript-Funktionen benötigst Du natürlich trotzdem, u. a. zum Abfangen des IE8-Object-Bugs und auch dafür, dass sich Dein Einbindebereich automatisch an die jeweilige Objektgröße anpasst - vor allem wichtig, wenn sich der Einbindebereich beim onload- und onchange-Event automatisch an dynamische Größenveränderung der eingebundenen Objekte anpassen soll. Falls Du dieses Feature brauchst, musst Du natürlich auch ein JS-Fallback dafür programmieren - im Beispiel-Insertag repräsentiert durch den Fallback-Parameter "height". Ein bisschen was sollst Du allerdings auch noch selber machen, sonst hätte ich Dir ja gleich meinen kompletten Code posten können. ;-)) Ich versuch Dir aber gern zu helfen, falls Du bei irgendwelchen Stellen der Anpassung Deiner Lösung mal hängen solltest. Dummerweise gibt auch stundenlanges googeln zum Thema "Einbindung dynamischer Objekte" keinerlei brauchbare Tipps her außer 98% Halbwissen-Gelaber oder "geht nicht" oder angeblich ultimative Lösungen, von denen keine einzige auch nur ansatzweise funzt.

HG Andreas

PS: Vielleicht wunderst Du Dich über diesen Teil des Insertags: objektdateiname&param=0&val=0
Hängt mit dem günstigen Umstand zusammen, dass der PHP-Parser URL-Parameter und deren Zuweisung bei einer 0 als nicht existent betrachtet. Angenommen, der Insertag-Übergabeparameter "scope" des obigen Beispiels sei "index.php", "param" sei "0" und "val" ebenfalls "0", so würde es ersetzt durch: index.php?0=0 - somit würden der erste GET-Parameter der URL und dessen Wert ignoriert. Auf diese Weise können im Contao-Insertag auch beliebig viele Platzhalter für Parameter definiert werden, die nicht bei jedem Objektaufruf benötigt werden. Im vorstehenden Insertag könnten die beiden 0en z. B. ersetzt werden durch id und Value des GET-Parameters "id". Das ermöglicht universelle Inserttags, welche je nach Befüllung vom Einbindungsscript individuell verarbeitet werden können. Hingegen benennt man solche Parameter, bei denen klar ist, dass sie vom Einbindungsscript auf jeden Fall benötigt werden, im Insertag gleich mit deren Namen, wie z. B. "bgcolor" und "#fff". Daraus würde dann index.php?bgcolor=#fff