There are 2 widgets on the page, they are designed as independent components and you don’t want to communicate directly between them. I decided to try to use the mechanism of communication through events. But I ran into the problem that, for example, a string of 1 million characters was not transmitted by an event in the edge (there is simply nothing in the details event), but everything is fine in Mozille.

Events are created through the CustomEvent interface:

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

The question is, how much data can we safely transmit to detail events? It is safely meant so that the data in the event reached the addressee.

    1 answer 1

    I had quite an interesting experience with events in EDGE. I ran a test in Microsoft Edge (v40.15055.0.0) with passing a string of 1,600,000 characters in the event parameters and this is what happened:

    1. The string is transmitted completely and without problems. (I did not try to transmit a longer line).
    2. I didn’t completely insert it into the HTML element in the EDGE; I found out experimentally that the maximum that the browser on my computer is capable of is a miracle is 1,342,177 characters, while the console displays the entire line without any problems.
    3. Chrome has no problems with insertion.

    I tried to google on the strange behavior in EDGE, but it did not. If anyone has an explanation, share :)

     (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); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="stringLength"></div> <div id="rStringLength"></div> <div id="rString"></div> <div id="rStringChrome"></div> <button id="tsButton">Test</button>