Javascript Inline-Display-Unterschied zwischen den Browsern?

Question

ich folgende Inline-Javascript-Code haben:

<a href="javascript:{ document['example'].src = 'cube.png'; document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; }">Cube</a> 

Für Ihre schlechte müde Programmierer Augen, hier ist die erweiterte Version:

document['example'].src = 'cube.png'; 
document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; 

Dieser Code als Hyperlink fungiert, die das example Bild zu einem Bild ändert eines 3D - Würfels und ändert einen <pre id="constructor"> Inhalt in den entsprechenden Konstruktor. (Dies ist offensichtlich eine Tutorial-Seite).

Dies funktioniert in Chrome völlig in Ordnung, aber in anderen Browsern, bekomme ich entweder eine neue Seite oder den Inhalt der gesamten Seite geändert:

Mesh mesh = new Mesh.Cube(); 

Was mit dem Code ist das Problem? Was mich verwirrt ist, dass es in einem Browser und nicht in einem anderen gültig ist. Es ist, als ob das Skript das Konstruktorelement nicht finden konnte und die gesamte Seite als Fallback vorgeschlagen hat. Ich bin weit davon entfernt ein Javascript-Experte zu sein, also ist das nur eine wilde Vermutung.

Answer 1

ich nur antworten

Die href verhält sich anders als jedes onXXX-Ereignis (daher Javascript: Protokoll). Es versucht irgendwie, neue Dokumente zu laden und etwas hinein zu legen. Das Schlimmste ist, dass es alle Ausgaben erfasst. Also, um es zu arbeiten, wie sie ist, müssen Sie alle Anweisung Werte als Zuweisungen fangen:

var x = document['example'].src = 'cube.png'; 
var y = document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; 

alle in javascript:{...} natürlich.

Auch einige gute Kommentare und Erklärungen hier: http://www.west-wind.com/weblog/posts/9899.aspx

Answer 2

Nun, ich muss sagen, ich habe diese Art von Notation noch nie in einem Anker-Link gesehen, mit dem Braket, um einen Code darin zu setzen, meine ich.

Ich habe in Chrome versucht, es hat tatsächlich funktioniert, aber nicht in FireFox.

Vielleicht möchten Sie wie, dass, obwohl versuchen:

href="javascript:(function(){ document['example'].src = 'cube.png'; document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; })()" 

Aber um ehrlich zu sein, ich würde nur eine Hilfsfunktion erstellen und nennen es direkt wie:

href="javascript:myFunction('Cube')" 

Oder so ähnlich (auch besser wäre es, einen Ereignis-Listener dynamisch an den Anker-Link anzuhängen)

Answer 3

Versuchen Sie dies:

<a href="#" onclick="foo(); return false;">Cube</a> 

---

in Ihrem JavaScript-Code: "Was ist das Problem mit dem Code"

function foo() { 
    document['example'].src = 'cube.png'; 
    document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube(); 
}