Показать в JavaScript alert без остановки таймера

Вообще, использовать стандартный JavaScript alert даже для отладки — плохая идея. Для сообщений есть отличные окошки из Boot­strap JS или jQueryUI, для отладочной информации — console.log.

Но иногда нужно написать окошко очень-очень быстро. Например, сдать бета-версию приложения, а окошко потом переделать.

В браузерах, основанных на WebKit (Chrome, Safari, JavaFX WebEngine) открытый alert считается чрезвычайным событием и останавливает все таймеры своей нити. Поэтому показывать его надо в отдельной нити, вот так:

function showMessage(text){
  setTimeout(function() { alert(text); }, 1);
}

 

JavaScript charset в браузере

Согласно стандарту HTML5, стандартная кодировка страницы — UTF-8. А вот с JavaScript всё сложнее.

Пусть у нас есть какой-то JSON. Напишем функцию, которая его возвращает:

function getOutlineJson() {
  return {
      "title" : "Элемент1"
  };
}

Сохраняем в отдельный файл, привязываем через <script>. Пытаемся вывести в консоль:

document.addEventListener('DOMContentLoaded', function() {
  console.log(getOutlineJson());
});

В консоли будет JSON с полями на неведомом языке. Хотя, как подтверждает view.encoding() в консоли Sub­lime, все файлы — в UTF-8.

А если добавить вывод чего-то кириллического прямо на экран?

document.addEventListener('DOMContentLoaded', function() {
  console.log("проверка консоли");
  console.log(getOutlineJson());
});

Внезапно, кодировка починилась. Видимо, кодировка выставляется по первому вызову.

Лечится мета-тегом:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Проверено в Fire­fox и Chrome.

showModalDialog’s returnValue is undefined in Chrome

С мест сообщают – в Chrome у show­Modal­Dia­log return­Val­ue – unde­fined. Баг известен с 2010 года и пока (16 сентября 2012) не исправлен.

Фиксить так:

В окне, которое вызывает модальное:

window.returnValue = undefined;
var result = window.showModalDialog("modalwindow.aspx", window, "dialogHeight:650px; dialogWidth:900px;");
if (result == undefined)
   result = window.returnValue;
if (result != null && result != "undefined")
  // Do something with the return value
  // defined in "result"

В модальном окне:

if (window.opener) {
    window.opener.returnValue = "your return value";
}
window.returnValue = "your return value";
self.close();

Click() doesn’t work in Chrome and Safari

Иногда нужно сделать, чтобы файл загружался не через форму по умолчанию (которая отличается у разных браузеров), а по нажатию на кнопку. Форму прячут, вместо неё ставят кнопку и вызывают по щелчку для неё click() для спрятанной формы.

Как правило, это работает. Но в браузерах на движке WebKit (например, Chrome и Safari) может и не сработать. В частности, Safari игнорирует click() по скрытым объектам.

Поэтому надо скрывать “народным” способом, чтобы не поломать вёрстку:

Вместо:

display: none;

Поставить в CSS:

width: 0px;
height: 0px;
position: absolute;

Script: Play mp3 at background with JavaScript

Как сделать фоновую мелодию для веб-страницы из mp3-файла?

Для начала — убедиться, что она нужна. Я, например, считаю, что единственное место во всём Вебе, где уместны фоновые мелодии — это игры. Пожалуйста, ставьте такие скрипты только в них.

Так как стандарт очень долго хранил молчание насчёт фоновых мелодий, каждый браузер реализовывал его по-своему

Путаница тут страшная. <embed>, который часто советуют, например, требует от Fire­fox подгружать плагин. <audio> толком не поддерживается даже в IE. Да и вообще, ещё 2 года назад разные браузеры поддерживали разные форматы и табличка выглядела приблизительно так:

Brows­er Ogg MP3 WAV
Fire­Fox 3.6+
Safari 5+
Chrome 6
Opera 10.5+
Inter­net Explor­er 9 (beta)

Так что используйте JPlay­er. Но иногда и он обваливается с ошибкой, что b.test — не является функцией :(.
Мне jPlay­er не помог. Пришлось родить кроссплатформенное решение:

<bgsound src="sound/plan.mp3" loop="1">
<object id="opera_player1" data="sound/plan.mp3" type="application/x-mplayer2" width="0" height="0">
 <param name="filename" value="sound/plan.mp3">
 <param name="autostart" value="1">
 <param name="autoplay" value="1">
 <param name="hidden" value="1">
 <param name="playcount" value="9999">
</object>
<audio src="sound/plan.mp3" autoplay="autoplay" loop="loop">
<object id="webkit_player" data="sound/plan.mp3" type="application/x-mplayer2" width="0" height="0">
 <param name="filename" value="sound/plan.mp3">
 <param name="autostart" value="1">
 <param name="autoplay" value="1">
 <param name="hidden" value="1">>
</object>
</audio>

В IE я это, впрочем, пока не тестировал.

Первый блок — исключительно для Opera. Во втором не забываем loop=“loop” — Chrome игнорирует Play­count.

Важно помнить, что object в Fire­fox не понимает loop. Так что просто ставьте большой play­count. А вот webkit-браузеры понимают его слишком хорошо и будут играть мелодию, даже когда вы покините сайт. Поэтому не забудьте убрать param loop во втором блоке.

И никогда не пытайтесь сгенерировать этот код через JavaScript. Такая реализация страшно тормозит даже на локальном компьютере.

А ещё не забывайте, что браузеры — умные создания и если поместить эти object’ы в скрытый блок (не важно, через, dis­play: none; или vis­i­bil­i­ty: hid­den), Fire­fox их проигрывать не будет.

Причём мы говорим, разумеется, о desk­top-ных браузерах. Про мобильные даже вспоминать страшно.