HTML IFRAME WITH JAVA SCRIPT CODE HOW TO

With that out of the way, if we visit the index.html page we should now see the iframe containing our other page below it. This means I can use that URL as the source for my iframe, so I will set that as the value of my src attribute now. When I visit localhost:5000 I will be served the parent page, index.html, and if I visit localhost:5000/inner.html, I will get the page I want to embed. In my case, they are being served on port 5000. You should get some output indicating which port the assets are being served on.

If you have npm installed, navigate to the directory where these files are located, and run npx serve. The easiest way to do this is with something like the npm package serve. Now we need to load this page into the iframe. Structurally we will make something very similar to the parent page. This is the page which will be running inside the iframe or popup. Aside from that, we have the guest of honor, the iframe itself, currently with no source for it, because we need to make a page to embed first. I will use a disabled textarea for showing data from incoming messages from the embedded page, and an input and button for sending messages to said page. So let's create a basic page to act as our parent. Iframes are easy to play with though, so we will use them for this example.Įstablishing 2-way communication between a child page and its parent can be done a few ways, but generally, the recommended approach is to use window.postMessage, if the technologies you are using support it (sorry IE users). The method examined here isn't just for iframes though, it will work in any case where you have access to another page's window object (so popups, and embedded web-browsers can join in on the fun too). Being able to send data between the iframe and the parent page is a useful trick for delivering more integrated solutions, rather than the traditional boring 'page-in-a-page' way iframes get used.

HTML IFRAME WITH JAVA SCRIPT CODE HOW TO

Despite this, they are one of the tools at our disposal, and knowing how to use them effectively could open the door to new solutions to old problems. Iframes get a bad wrap for everything from security problems, to usability and SEO issues.

Html iframe with java script code