Facebook Tab: Höhe eines iFrames (kein FBML!) setzen

Wenn man einen Facebook Tab in der Höhe ändern will (default ist 520×800), dann findet man dazu einige Vorschläge im Netz. Die meisten gehen davon aus, dass der Tab in FBML angelegt ist, was er aber nicht mehr sein muss; stattdessen kann man auch einen simplen IFrame benutzen. Die Lösung, die in dem Fall für mich funktioniert hat:

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>

FB.Canvas.setSize();

</script>

an das Ende des body hängen, also direkt vor </body>. Wichtig: Der div “fb-root”. Viele Lösungen im Netz basieren offenbar darauf, dass ein solches Element schon da ist – was zumindest bei mir nicht der Fall war.

Ich habe für den body außerdem padding und margin auf 0, sowie overflow auf hidden und height auf die Höhe des IFrames gesetzt.

Youtube auf dem iPhone

Youtube empfiehlt zwar die Verwendung von swfobject, dann funktioniert’s aber nicht auf dem iPhone – man sieht nix. Es gibt aber tatsächlich (XHTML-valide) Möglichkeiten, zB diese hier auf Learning the world. Man sieht dann das Preview-Bild, das einem auch zB in der youtube-Suche angezeigt wird. Bei Klick darauf öffnet sich die Youtube-App.

Mich würde allerdings mal interessieren, was man sieht, wenn man sich die Youtube-Videos auf diesem meinen Blog mit dem iPhone ansieht… verdammter Mist. Wieso haben wir eigentlich den IE6 überstanden, nur damit nun die nächste Firma anfängt, dem Web seine Extrawürste aufzuzwingen?? m(

JSON Online Parser

Einen Parser für JSON, mit brauchbareren Fehlermeldungen als der Firebug sie bietet, gibt es auf json.parser.online.fr.

Abgerundete Ecken

rounded_corners

Wer abgerundete Ecken auf seiner Webseite will, und keine Lust auf Photoshop-Orgien hat (oder CSS3 verwenden will^^), sollte sich mal die Corner Demo für jQuery ansehen. Danke an Moritz, once again!

XMLHttpRequest.responseText mit XML und Javascript [UPDATE]

ajax

“Normalerweise” besteht so ein responseText aus einem XML-Fragment. Das baut man dann dynamisch in seine Seite und gut ist. Javascript wird dabei nicht mehr ausgeführt.

Ein Trick zum dynamischen Abrufen (und Ausführen) von JS besteht darin, dass der responseText an eval() übergeben und so ausgeführt wird… dazu muss der responseText aber natürlich reines JS sein.

Wenn man nun aber beides will, so erzeuge man einen responseText a la

<script type="text/javascript" id="theScript">
    alert( 'yeah' );
</script>
<div id="theContent">...</div>

alert( 'yeah' );

</script>

und voila (hier am Beispiel von ExtJS):

var ajaxRequest = Ext.Ajax.request({
    url: 'index.php?fooBar,
    params: {},
    disableCaching: false,
    success: onResponseDoMe,
    failure: function(){}
});

var ajaxRequest = Ext.Ajax.request({

url: 'index.php?fooBar,

params: {},

disableCaching: false,

success: onResponseDoMe,

failure: function(){}

});

hier nun der Zauber:

function onResponseDoMe( xhr ){
    var newContent = xhr.responseText;
    Ext.get('targetDiv').update(newContent);
    eval( Ext.get('theScript').dom.innerHTML );
}

function onResponseDoMe( xhr ){

var newContent = xhr.responseText;

Ext.get('targetDiv').update(newContent);

eval( Ext.get('theScript').dom.innerHTML );

}

Der Trick ist also einfach: Packe das JS in einen <script>-Knoten, und gebe diesem eine ID, um darauf zugreifen zu können 🙂

NACHTRAG: In ExtJS kann man natürlich auch einfach den Parameter loadScripts von Ext.Element.update() nutzen 😀

[Firefox] ExternalInterface.call() von außerhalb “der Bühne”

firefox

Man liest von ExternalInterface-Problemen, die darauf basieren, dass von Javascript aus AS-Funktionen aufgerufen werden, bevor das SWF geladen ist – etwa bei onLoad. Als Lösung gilt: “Rufe aus dem SWF heraus eine JS-Funktion auf. Dann (und erst dann) weiß JS, dass das SWF bereit ist.”

So weit, so gut.

Was man dazu wissen muss, und was man deutlich weniger schnell findet im Netz: Ein SWF, das außerhalb des sichtbaren Bereiches liegt (etwa bei “position: absolute; top: -10px; left: -10px;”), ruft im Firefox 3/Windows keine ExternalInterface-Funktion auf. Gar keine, nie. Obwohl ExternalInterface.available true ist, und obwohl das SWF eigentlich angezeigt wird.

HTH.

Der Neckar regelt.

The Neckar rulez: Guckst Du hier (funktioniert nur in neuesten Browsern)

Klingt schlüssig.

Fancy Fonts vs. Das Internet

praegnanz.de gibt einen Überblick über aktuelle Methoden zur Einbindung von nicht-webkonformen Schriften im Netz. Besonders interessant finde ich den Ansatz von typeface… “Darauf muss man erstmal kommen!” Dem bleibt nichts hinzuzufügen – außer vielleicht einer Demo: lab.crusy.net/typeface.

JS-Aufrufe aus Actionscript

Wer nach einer Methode sucht, um Javascript-Methoden aus Actionscript heraus anzusprechen, wird häufig

ExternalInterface.call();

1	ExternalInterface.call();

finden. Ich weiß nicht, ob das unter irgendwelchen Umständen im IE funktioniert, aber es tut das mindestens nicht immer. Ich empfehle stattdessen

navigateToURL( new URLRequest("javascript:foo()"), "_self" );

1	navigateToURL( new URLRequest("javascript:foo()"), "_self" );

hth.

crusy.net

♪ Commit ins Abenteuerland ♫

Category Archives for Javascript