Comlink iFrame demo

This example runs code on page2.html from a hidden iframe and then populates the result in the box below.

Because it uses post messaging the sites don't need to be on the same origin. A page can define an API which can be then be used by other front end websites!! See: Paul Kinlan's Awesome Article

The library is called Comlink and works as well as iframes it can also communicate to web workers and service workers.

Code

    
      // page1.html
      iframe.onload = async function iframeLoaded() {
        const api = Comlink.proxy(iframe.contentWindow);
        target.textContent = await api.doThing();
      }
      
      // page2.html
      Comlink.expose({
        doThing() {return 'Hello from ' + location.href}
      }, window.parent);