IFRAME MESSAGES SENDER

iframe-messages-sender.markdown

IFRAME MESSAGES SENDER

This codepen is used to be embedded and show how to send message to its parent page

A Pen by zipang on CodePen.

License.

index.html

<div class="container">    
  <h1>1 AM NOT YOUR STANDARD IFRAM3</h1>

  <button id="cmdSendRandomQuote" class="basic-button">
    Click here to receive some random quote
  </button>

  <button id="cmdGiveRandomBeer" class="basic-button">
    Click here to have some beer
  </button>
  
  <h2>Last message sent</h2>
  <p><ode><pre id="lastMessage"></pre></code></p>

</div>

script.js

const lastMessage = document.getElementById("lastMessage");

const postMessageFrom = (apiUrl) => (evt) => {
  fetch(apiUrl)
    .then((resp) => resp.json())
    .then((randomData) => {
      console.log("Sending", randomData);
      window.parent.postMessage(JSON.stringify(randomData), "https://cdpn.io/zipang");
      lastMessage.innerHTML = JSON.stringify(randomData, null, '    ');
    });
};

document
  .getElementById("cmdSendRandomQuote")
  .addEventListener(
    "click",
    postMessageFrom("https://dummyjson.com/quotes/random")
  );

document
  .getElementById("cmdGiveRandomBeer")
  .addEventListener(
    "click", 
    postMessageFrom("https://random-data-api.com/api/v2/beers")
  );

style.css

* {
  font-family: serif;
}
.container {
  max-width: 60ch;
  margin: 0 auto;
  min-height: 100vh;
}
.basic-button {
  padding: 1em;
  margin: 1em auto;
}