PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Written By
Views

How to talk to the parent page from an iframe

Somtimes you need a way to communicate with an iframe. Talking directly to the iframe can be done by sending parameters via the src URL, but what if you need a simple way to pass something from an iframe to the parent page? Well, the simplest way to do this would be to call a javascript function that lives in the parent page. To access the parent page, you will use the 'parent' object inside javascript of your iframe.

As an example, here is what your parent page might look like

<html>
<head>
<script type="text/javascript">
    function alert_me(string)
    {
          alert(string);
    }
</script>
</head>
<body>
    <iframe src="my_iframe.html"></iframe>
</body>
</html>
</pre><p>Now, inside of your iframe html, you could simply do the following to call the parent function within your iframe (my_iframe.html):</p>
<pre lang="HTML">
    <script type="text/javascript">
        parent.alert_me('hello there!');
    </script>

Now, when the iframe is called it will call the parent function alert_me, additionally you can feel free to have the parent function called during an event, like a button click or even a key press. Anyway, it's very simple, hope someone can find this useful ;)

Comments (0)

loading comments