example/static/child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Child</title>
  <script src="https://unpkg.com/penpal@^5/dist/penpal.min.js"></script>
  <style>
    html, body {
      margin: 0;
      overflow: hidden;
    }

    button, pre {
      display: block;
    }
  </style>
</head>
<body>
  <button id="signIn" disabled>Sign in</button>
  <button id="signOut" disabled>Sign out</button>
  <button id="scrollTop" disabled>Scroll to top</button>
  <pre id="url"></pre>
  <pre id="token"></pre>
  <pre id="profile"></pre>

  <script>
    const log = (el, info) => el.textContent = typeof info === 'object' ? JSON.stringify(info, null, 4) : String(info);

    // Child needs to connect after parent
    window.onload = () => {
      const connection = Penpal.connectToParent({
        methods: {
          onShow: () => {
            console.log('Im visible');
          },
          onHide: () => {
            console.log('Im hidden');
          }
        },
        timeout: 5000,
        debug: true
      });

      // Enable buttons once connected
      connection.promise.then((parent) => {
        signIn.onclick = () => parent.signIn();
        signOut.onclick = () => parent.signOut();
        scrollTop.onclick = () => parent.scrollTop();

        signIn.disabled = false;
        signOut.disabled = false;
        scrollTop.disabled = false;

        // Access parent info
        Promise.all([
          parent.getURL(),
          parent.getIMSAccessToken(),
          parent.getIMSProfile()
        ]).then((data) => {
          // Log info
          console.log(new URL(data[0]));
          log(url, data[0]);
          log(token, data[1]);
          log(profile, data[2]);

          // Update parent height to avoid duplicated scrollbar issue
          parent.setHeight(`${document.body.scrollHeight}px`);
        });
      });
    };
  </script>
  <h1>iFrame source file</h1>
  <p>Some text in frame: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend ornare purus, vel dapibus augue suscipit in. Nam blandit vitae ante et auctor. Donec placerat egestas posuere. Aliquam erat volutpat. In condimentum massa eu pharetra porta. Nunc tempus massa sit amet nisl posuere sagittis. Mauris sit amet rhoncus neque. Phasellus ut vulputate est, vel auctor metus.</p>
</body>
</html>