@ampproject/viewer-messaging
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    AMP Viewer Messaging

    npm version

    The AMP Viewer Messaging library allows an AMP Viewer to establish a communication channel with an AMP document.

    See Connecting AMP Viewers with AMP pages for more information.

    Installation

    Install via:

    npm i @ampproject/viewer-messaging

    Usage

    Assuming you have an AMP document hosted on https://example.com/amp-document:

    import {Messaging} from '@ampproject/viewer-messaging';
    
    const iframe = document.createElement('iframe');
    iframe.setAttribute(
      'src',
      `https://example.com/amp-document#origin=${window.location.origin}`
    );
    document.body.appendChild(iframe);
    
    const messaging = await Messaging.waitForHandshakeFromDocument(
      /* source window */ window,
      /* target window */ iframe.contentWindow,
      /* target origin */ 'https://example.com'
    );
    messaging.setDefaultHandler((name, data, rsvp) => {
      console.log(`Received message: ${name}`);
    });
    // use messaging.sendRequest(...) to make requests to the AMP document

    Note: The AMP document needs to include the amp-viewer-integration script:

    <script async src="https://cdn.ampproject.org/v0/amp-viewer-integration-0.1.js"></script>

    Keywords

    Install

    npm i @ampproject/viewer-messaging

    DownloadsWeekly Downloads

    366

    Version

    1.1.2

    License

    Apache-2.0

    Unpacked Size

    29.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • esth
    • ampprojectbot
    • kdwan
    • ampproject-admin
    • kristoferbaxter
    • jridgewell
    • choumx
    • amp-toolbox
    • fstanis
    • erwinmombay
    • samouri
    • caroqliu
    • rsimha
    • dvoytenko
    • patrickkettner
    • alanorozco