CodePen Embed - Fastify Encapsulation

Live

​x
 
<section>
  <div>
​
    <!-- Our script to communicate between embed -->
    <script>
      function sendToEmbed() {
        const jsonCrackEmbed = document.getElementById("jsoncrackEmbed");
        const json = document.getElementById("jsoncrackInput").value
        jsonCrackEmbed.contentWindow.postMessage({
          json: json
        }, "*");
      }
    </script>
​
    <!-- Input and button to track and send changes -->
    <textarea id="jsoncrackInput" type="text">
{
  "id": 0.5029862379236871,
  "name": "fastify -> fastify-overview",
  "children": [
    {
      "id": 0.9674802321405889,
      "name": "plugin",
      "children": [
        {
          "id": 0.8995977449066748,
          "name": "plugin",
          "children": [
            {
              "id": 0.44223106518284494,
              "name": "plugin",
              "children": [
                {
                  "id": 0.49653359060017466,
                  "name": "plugin"
                }
              ]
            },
            {
              "id": 0.3104771773433552,
              "name": "plugin"
            },
            {
              "id": 0.7406036546573258,
              "name": "plugin",
              "children": [
                {
                  "id": 0.31963728242475753,
                  "name": "plugin",
                  "children": [
                    {
                      "id": 0.2767763128642642,
                      "name": "plugin"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
    </textarea>
  </div>
​
  <!-- JSON Crack iframe embed goes here -->
  <iframe id="jsoncrackEmbed" src="https://jsoncrack.com/widget?t=1" width="100%" height="100%" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>
</section>

Live

xxxxxxxxxx
 
body {
  margin: 0;
  padding: 0;
}
​
section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
​
textarea {
  width: 100%;
  height: 100%;
}
​
div {
  display: flex;
  width: 100%;
  height: 100px;
}
​

Live

xxxxxxxxxx
 
window.addEventListener("load", sendToEmbed);
​

This Pen is owned by Manuel Spigolon on CodePen. It is a fork of this Pen.

See more by @Eomm on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.