How to use the penpal.connectToChild function in penpal

To help you get started, we’ve selected a few penpal examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Aaronius / penpal / types / type-tests.ts View on Github external
// URL of page to load into iframe.
  url: 'http://example.com/iframe.html',
  // Container to which the iframe should be appended.
  appendTo: parentContainer,
  // iframe to use
  iframe: iframeToUse,
  // Methods parent is exposing to child
  methods: parentMethods
});

permissiveParentConnection.promise.then(child => {
  child.multiply(2, 6); // $ExpectType any
  child.foo(12, 4); // $ExpectType any
});

const strictParentConnection = Penpal.connectToChild({
  // URL of page to load into iframe.
  url: 'http://example.com/iframe.html',
  // Container to which the iframe should be appended.
  appendTo: parentContainer,
  // iframe to use
  iframe: iframeToUse,
  // Methods parent is exposing to child
  methods: parentMethods
});

strictParentConnection.promise.then(child => {
  child.multiply(2, 6).then(total => {
    total; // $ExpectType number
  });
  child.divide(12, 4).then(total => {
    total; // $ExpectType number
github Aaronius / penpal / types / type-tests.ts View on Github external
}, 1000);
    });
  }
};

/**
 * Parent Window
 */

const parentContainer = document.getElementById('iframeContainer');
if (!parentContainer) throw new Error('Parent container not found');

const iframeToUse = document.createElement('iframe');
if (!iframeToUse) throw new Error('Parent iframe element has not been created');

const permissiveParentConnection = Penpal.connectToChild({
  // URL of page to load into iframe.
  url: 'http://example.com/iframe.html',
  // Container to which the iframe should be appended.
  appendTo: parentContainer,
  // iframe to use
  iframe: iframeToUse,
  // Methods parent is exposing to child
  methods: parentMethods
});

permissiveParentConnection.promise.then(child => {
  child.multiply(2, 6); // $ExpectType any
  child.foo(12, 4); // $ExpectType any
});

const strictParentConnection = Penpal.connectToChild({
github portis-project / web-sdk / packages / portis-web3 / src / index.ts View on Github external
const style = document.createElement('style');
    style.innerHTML = styles;

    const container = document.createElement('div');
    container.className = 'por_portis-container';

    const widgetFrame = document.createElement('div');
    widgetFrame.id = `portis-container-${Date.now()}`;
    widgetFrame.className = 'por_portis-widget-frame';

    container.appendChild(widgetFrame);
    document.body.appendChild(container);
    document.head.appendChild(style);

    const connection = Penpal.connectToChild({
      url: this._widgetUrl,
      appendTo: document.getElementById(widgetFrame.id)!,
      methods: {
        setHeight: this._setHeight.bind(this),
        getWindowSize: this._getWindowSize.bind(this),
        onLogin: this._onLogin.bind(this),
        onLogout: this._onLogout.bind(this),
        onActiveWalletChanged: this._onActiveWalletChanged.bind(this),
        onError: this._onError.bind(this),
      },
    });

    connection.iframe.style.position = 'absolute';
    connection.iframe.style.height = '100%';
    connection.iframe.style.width = '100%';
    connection.iframe.style.border = '0 transparent';
github portis-project / web-sdk / packages / portis-eos / src / index.ts View on Github external
const onload = async () => {
        const style = document.createElement('style');
        style.innerHTML = styles;

        const container = document.createElement('div');
        container.className = 'por_portis-container';

        const widgetFrame = document.createElement('div');
        widgetFrame.id = `portis-container-${Date.now()}`;
        widgetFrame.className = 'por_portis-widget-frame';

        container.appendChild(widgetFrame);
        document.body.appendChild(container);
        document.head.appendChild(style);

        const connection = Penpal.connectToChild({
          url: this._widgetUrl,
          appendTo: document.getElementById(widgetFrame.id)!,
          methods: {
            setHeight: this._setHeight.bind(this),
            getWindowSize: this._getWindowSize.bind(this),
            onLogin: this._onLogin.bind(this),
          },
        });

        connection.iframe.style.position = 'absolute';
        connection.iframe.style.height = '100%';
        connection.iframe.style.width = '100%';
        connection.iframe.style.border = '0 transparent';

        const communication = await connection.promise;
        resolve({ communication, iframe: connection.iframe, widgetFrame });

penpal

A promise-based library for communicating with iframes via postMessage.

MIT
Latest version published 2 years ago

Package Health Score

50 / 100
Full package analysis