Размер данных в CustomEvent

#javascript #кроссбраузерность

На странице есть 2 виджета, они оформлены как независимые компоненты и делать общение
между ними напрямую не хочется. Я решил попробовать использовать механизм общения через
события. Но вот столкнулся с проблемой, что, например, строка длиной 1млн символов
не передалась по событию в edge (в details события просто ничего нет), в Мозилле же
все прекрасно.

События создаются через интерфейс CustomEvent:

var event = new CustomEvent(type, {
    'detail': data
});

element.dispatchEvent(event);


Вопрос в том, какое количество данных мы можем безопасно передавать в detail события?
Безопасно имеется в виду так, чтобы данные в событии дошли до адресата.
    

Ответы

Ответ 1

Провёл довольно интересный опыт с событиями в EDGE.
Запустил тест в Microsoft Edge (v40.15055.0.0) с передачей в параметрах события строки
длинной в 1 600 000 символов и вот что получилось:


Строка передается полностью и без проблем. (Длиннее строку передавать не пробовал). 
Вставить её в HTML элемент в EDGE полностью не получилось, опытным путём выяснил,
что максимум, на что способен этот чудо браузер на моём компе - это 1 342 177 символов,
при этом в консоль выводит всю строку без проблем.
В Chrome проблем с вставкой не возникло.


Пытался нагуглить инфу по странному поведению в EDGE, да не вышло. 
Если у кого нибудь есть объяснения, делитесь :)



(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();


window.addEventListener("stringTest", function(e) { 
  $('#rStringLength').html('receive string length:' +  e.detail.trString.length);
  document.getElementById('rString').innerHTML = 'receive string EDGE:' +  e.detail.trString.substr(0,
1342177); // EDGE
  $('#rStringChrome').html('receive string Chrome:' +  e.detail.trString);
});


var tString = '';

for (var i = 0; i < 100000; i++) {
  tString += '1';
}
tString += tString;
tString += tString;
tString += tString;
tString += tString; 
$('#stringLength').html('test string length: ' + tString.length);


var myEvent = new CustomEvent("stringTest", {
  detail: {
    trString: tString
  }
});
$('#tsButton').click(function() {
  window.dispatchEvent(myEvent);
});