Разница в показе встроенного JavaScript в разных браузерах?

Question

У меня есть следующий встроенный код Javascript:

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

Для ваших усталых глаз программиста, вот расширенная версия:

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

Этот код действует как гиперссылка, которая изменяетexample изображение к изображению трехмерного куба и изменяет содержимое <pre id="constructor"> на соответствующий конструктор.(Это, очевидно, учебная страница).

Это прекрасно работает в Chrome, но в других браузерах я получаю либо новую страницу, либо содержимое всей страницы изменяется на:

Mesh mesh = new Mesh.Cube();

В чем проблема с кодом?Что меня удивляет, так это то, что он действителен в браузере, а не в другом.Это как если бы скрипт не мог найти элемент «конструктор» и предложил всю страницу как запасной вариант.Я далёк от того, чтобы быть экспертом по Javascript, так что это просто дикое предположение.

Answer 1

Попробуйте:

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

---

В вашем коде JavaScript:

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

Answer 2

Что ж, я должен сказать, что никогда не видел такого рода нотации в ссылочной ссылке, я имею в виду использование скобки для добавления в нее некоторого кода.

Я пробовал в Chrome, он действительно работал, но не в FireFox.

Вы можете попробовать вот так:

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

Но, если честно, я бы просто создал вспомогательную функцию и вызвал ее прямо как:

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

Или что-то в этом роде (еще лучше было бы динамически подключить прослушиватель событий к ссылке привязки)

Answer 3

Я просто отвечу «В чем проблема с кодом?»

href ведет себя не так, как любое событие onXXX (следовательно, javascript: protocol). Он пытается загрузить новый документ и поместить что-то внутрь. Хуже всего, он ловит весь вывод. Итак, чтобы все работало как есть, вам нужно перехватить все значения операторов как присваивания:

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

все в javascript:{...} конечно.

Также здесь есть несколько хороших комментариев и объяснений: http://www.west -wind.com / weblog / posts / 9899.aspx