Allow embedding in an `<iframe>` with a different origin

[novusnota]

The portal in general and the TVM Specification there in particular are great tools that could be featured on other websites inside an <iframe>. For example, the TVM Specification table could look nice on the corresponding page in the docs!

For that, all manipulations with localStorage must be adjusted because there's only one localStorage (of a parent window) when an <iframe> points to a different origin. As such, the postMessage API should be used.

Whenever there's a need to set/get data in/from localStorage and TxTracer knows that it is inside of the <iframe> (i.e. there's window.parent or some similar heuristics), it can send a message to the parent window and vice-versa. Both windows could then listen for messages and respond accordingly.

// Parent to iframe
iframe.contentWindow.postMessage({type: 'setData', key: 'foo', value: 'bar'}, '*');

// iframe to parent
window.parent.postMessage({type: 'getData', key: 'foo'}, '*');

// Listening for messages inside either of windows
window.addEventListener('message', (e) => {
  if (e.data.type === 'setData') {
    localStorage.setItem(e.data.key, e.data.value);
  }
});