Javascript and Iframes

#javascript #html #tutorial

From the title you know I'm going to write about Javascript and Iframes. In everyday life as a developer or a blogger, embedding an Iframe into your website is pretty straightforward.

For instance, if you need to embed a youtube video to your website, you can simply copy the code from Youtube and paste it on your website.

<iframe width="560" height="315" src="https://www.youtube.com/embed/$SOME_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

That's what I called "straightforward".

I knew this and started developing a commenting plugin, Hyvor Talk a few months back. It was not straightforward. In this article, I'm going to explain the reason for that. I learned many things and devised some tricks while creating this plugin. I'll explain those in this article. If you ever plan to develop a plugin or anything that loads on other websites using Iframes (something like a commenting plugin) this article will help you to understand how to do certain tasks in an organized way. Also, I'll explain how to overcome the obstacles you will probably face while developing such thing.

For this tutorial, let's assume that you are creating a plugin that is loaded in an iframe on other websites (I'm calling the owner of this other website "client"). Also, your website's domain is pluginx.com and the client's web site's domain is client.com.

Iframes

First, let's look into what's an Iframe.

The HTML Inline Frame element () represents a nested browsing context, embedding another HTML page into the current one - MDN </blockquote> Instead of just adding HTML code to a website, in this article, I'm going to focus on how to do work with Iframes using Javascript. <h1> <a name="why-do-we-really-need-javascript" href="#why-do-we-really-need-javascript" class="anchor"> </a> Why do we really need Javascript? </h1> Javascript can give you more control with the Iframe. Especially, auto-resizing an iframe when the content in the iframe changes can only be done with Javascript. This requires communication between the iframe (your website) and the website (other one's website). So, the best way is not to give an <code><iframe></code> code to the client but to let them add a Javascript file. The client adds the code to his website. The code includes a <code><script></code> tag and a <code><div></code> tag (the iframe container). <div class="highlight"><pre class="highlight html"><code><html> <head> ... </head> <body> ... <div id="pluginx-iframe-container"></div> <script src="https://pluginx.com/iframe-loader.js"></script> </body> </code></pre></div> Now, we can write the iframe-loader.js which loads the HTML page hosted on your domain. <h2> <a name="adding-the-iframe" href="#adding-the-iframe" class="anchor"> </a> Adding the Iframe </h2> This task requires simple Javascript. One thing you should remember is to keep all the variables in a <a href="https://www.w3schools.com/js/js_scope.asp">local scope</a>. This can be done by wrapping the code inside a <a href="https://scriptverse.academy/tutorials/js-self-invoking-functions.html">self-invoking function</a>. This prevents the collision between your JS variables and the client's website's JS variables. If you use a bundler like <a href="https://webpack.js.org/">webpack</a>, this is not required as webpack makes all the variables local. <div class="highlight"><pre class="highlight javascript"><code>(function() { var iframe = document.createElement("iframe"); iframe.src = "https://pluginx.com/iframe"; // iframe content (HTML page) iframe.name = "pluginx-main-iframe"; // this is important })(); </code></pre></div> I'll explain the importance of the <code>name</code> attribute later. Make sure to set a unique name for that. I found that adding the following attribute makes your iframe well-looking in all the browsers. <div class="highlight"><pre class="highlight javascript"><code>iframe.width = "100%"; iframe.allowTranparency = true; iframe.tabIndex = 0; iframe.scrolling = "no"; iframe.frameBorder = 0; iframe.style.border = "none"; iframe.style.overflow = "hidden"; iframe.style.userSelect = "none"; iframe.style.height = "250px"; // set initial height </code></pre></div> Now, we can append the <code><iframe></code>. <div class="highlight"><pre class="highlight javascript"><code>var container = document.getElementById("pluginx-iframe-container"); container.appendChild(iframe); </code></pre></div> <h1> <a name="the-problem-same-origin-policy" href="#the-problem-same-origin-policy" class="anchor"> </a> THE PROBLEM (Same Origin Policy) </h1> If both websites were in the same domain, you can simply execute each other page's function, access variables, and so. But, according to the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same Origin Policy</a>, this cannot be done. The browser restricts parent websites from accessing the iframe window's functions and variables and vice versa if those two are not in the same domain. At first, I thought this is an unnecessary security implementation. But, now I understand it's one of the best ways to secure websites. Why? If your client could access your website with Javascript, They can run your functions, update content, click buttons, add likes, steal user data, and more. There are <a href="https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy">several ways</a> to circumvent the Same Origin Policy. The best method is HTML 5 Post Message API. <h1> <a name="post-message-api" href="#post-message-api" class="anchor"> </a> Post Message API </h1> Never think of any other best friend than the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage">Post Message API</a> until you finish developing this application! The <code>window.postMessage()</code> method safely enables cross-origin communication between Window objects. Here we can use it to communicate between our plugin and the client's website. We can listen to postMessages via the <code>window.onmessage</code> event. Note that you can only send strings via this. While creating Hyvor Talk, I created a simple class to wrap this communication. I recommend you to use that as it simplifies the process. Here's the code. I'll explain it next. <div class="highlight"><pre class="highlight javascript"><code>/** * Creates a messenger between two windows * which have two different domains */ class CrossMessenger { /** * * @param {object} otherWindow - window object of the other * @param {string} targetDomain - domain of the other window * @param {object} eventHandlers - all the event names and handlers */ constructor(otherWindow, targetDomain, eventHandlers = {}) { this.otherWindow = otherWindow; this.targetDomain = targetDomain; this.eventHandlers = eventHandlers; window.addEventListener("message", (e) => this.receive.call(this, e)); } post(event, data) { try { // data obj should have event name var json = JSON.stringify({ event, data }); this.otherWindow.postMessage(json, this.targetDomain); } catch (e) {} } receive(e) { var json; try { json = JSON.parse(e.data ? e.data : "{}"); } catch (e) { return; } var eventName = json.event, data = json.data; if (e.origin !== this.targetDomain) return; if (typeof this.eventHandlers[eventName] === "function") this.eventHandlers[eventName](data); } } </code></pre></div> I used ES6 to write this class. If you are not using that, you can simply convert this to browser-supported Javascript using <a href="https://babeljs.io/">Babel</a>. Before an explanation of the class, let's use it in our script (iframe-loader.js). <div class="highlight"><pre class="highlight javascript"><code> // handle each event from the iframe var clientEventsHandler = { resize: (data) => { // resize the iframe } }; messenger var clientMsger = new CrossMessenger(iframe.contentWindow, "https://pluginx.com", eventHandlers) </code></pre></div> While sending messages to the iframe, we will also need to receive messages and react upon data. The <code>clientEventsHandler</code> object will contain those functions. (keys with event name). Let's go back to our class. The constructor requires three parameters. <ul> <li>The first one is the iframe window on which we call the <code>postMessage()</code> function. </li> <li>Then, the target domain which is your website's domain. This allows us to verify incoming messages using <code>e.origin</code> </li> <li>Finally, the event handlers. I'll show you how to write some common event handlers like the resizing event later.</li> </ul> Now, we can send a message to the iframe using <code>clientMsger.post(eventName, data)</code>. Here, data should be an object. It will be converted to JSON and sent to the iframe. <h1> <a name="receiving-messages-in-iframe" href="#receiving-messages-in-iframe" class="anchor"> </a> Receiving messages in Iframe </h1> For now, we worked on the Javascript file added to the client's website. Now, we will start working on the iframe's script. We will need to use the same class in the iframe to receive messages. Your iframe's content (HTML) <div class="highlight"><pre class="highlight html"><code><html> ... html stuffs <script src="script.js"></script> </html> </code></pre></div> <code>script.js</code> <div class="highlight"><pre class="highlight javascript"><code>var iframeEventHandlers = {}; // some event handlers as the clientEventHandlers var clientDomain = ""; // How to find this??? var iframeMsger = new CrossMessenger(window.parent, clientDomain, iframeEventHandlers) </code></pre></div> We need to find the client's domain. How I did this was to set GET params when requesting the Iframe. <div class="highlight"><pre class="highlight javascript"><code>var domain = location.protocol + "//" + location.hostname; iframe.src = "https://pluginx.com/iframe?domain=" + domain; </code></pre></div> Then, you can receive it from your back-end language and set the <code>clientDomain</code> variable dynamically. Ex: For PHP <div class="highlight"><pre class="highlight javascript"><code>var clientDomain = "<?= $_GET['domain'] ?>"; // make sure this is in the PHP page ;) </code></pre></div> Now, both of our messengers are completed. Let's consider some events that you may need. <h1> <a name="events" href="#events" class="anchor"> </a> Events </h1> <h2> <a name="1-resizing" href="#1-resizing" class="anchor"> </a> 1. Resizing </h2> Iframes are not auto-resizing by default. We have to explicitly set the height of the iframe. Otherwise, a part of the iframe won't be displayed. So, resizing is a crucial part of any iframe. Resizing is quite complex than we think. You need to know the <code>scrollHeight</code> of the iframe document to be able to resize the iframe. This can only be canculated by the iframe. Here are the important moments to resize the iframe. <ol> <li>When the Iframe loads</li> <li>When the client's browser is resized</li> <li>When the height of the contents of the iframe changes. (Ex: New elements added)</li> </ol> <h3> <a name="no-1-amp-2-on-load-and-resize" href="#no-1-amp-2-on-load-and-resize" class="anchor"> </a> No. 1 & 2 (On load and resize) </h3> We can listen to iframe's <code>onload</code> event and the browser's <code>onresize</code> event from the script on client's website (iframe-loader.js). <div class="highlight"><pre class="highlight javascript"><code>(function() { // setting iframe and appending iframe.onload = function() { requestResize(); // do other onload tasks } window.addEventListener("resize", requestHeight); })(); </code></pre></div> The <code>requestHeight()</code> function This function only does one thing. Requests the height of the iframe from the iframe. <div class="highlight"><pre class="highlight javascript"><code>clientMsger.post("iframeHeightRequest"); </code></pre></div> This sends a message to the iframe with the event name "iframeResizeRequest" and no data. We have to listen to this event in the iframe. Add the event name and a handler to the <code>iframeEventHandlers</code> in the <code>script.js</code>. <div class="highlight"><pre class="highlight javascript"><code>var iframeEventHandlers = { iframeHeightRequest: () => { var docHeight = document.body.scrollHeight; iframeMsger.post("resize", { height: docHeight }); } } </code></pre></div> Now, we can receive the height from the client's script and resize the iframe. <div class="highlight"><pre class="highlight javascript"><code>var clientEventHandlers = { resize: () => { var height = data.height; var winScrollLeft = window.scrollX, windowScrollTop = window.scrollY; commentsIframe.style.visibility = "hidden"; commentsIframe.style.height = 0; commentsIframe.style.visibility = "visible"; commentsIframe.height = height + "px"; // + 10 to add little more height if needed // scroll to initial position window.scrollTo(winScrollLeft, windowScrollTop); } } </code></pre></div> This process can be confusing. I had the same feeling in the beginning. But, you can adapt to it quickly. If you feel like "bewildered" take a short break. (I did that, as I remember). After the break, look at this picture. <img src="https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/9ggjbbt6dn07ky3k5zty.jpeg" alt="Resizing Image"/> <h3> <a name="no-3-iframe-height-changed" href="#no-3-iframe-height-changed" class="anchor"> </a> No 3. (Iframe height changed) </h3> When you work inside the iframe, new elements can be added. This can cause to change the height of it. So, each time the height changes, we have to resize the iframe. We have to listen to DOM element changes in the iframe. Here's a perfect function I found from the internet for this task. <div class="highlight"><pre class="highlight javascript"><code>var DOMObserver = (function(){ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; return function( obj, callback ){ if( !obj || !obj.nodeType === 1 ) return; // validation if( MutationObserver ){ // define a new observer var obs = new MutationObserver(function(mutations, observer){ callback(mutations); }) // have the observer observe foo for changes in children obs.observe( obj, { childList:true, subtree:true }); } else if( window.addEventListener ){ obj.addEventListener('DOMNodeInserted', callback, false); obj.addEventListener('DOMNodeRemoved', callback, false); } } })(); </code></pre></div> Add this to <code>script.js</code> and then call the function. <div class="highlight"><pre class="highlight javascript"><code>DOMObserver(document.body, iframeEventHandlers.iframeHeightRequest); </code></pre></div> Each time a node is added or removed, the <code>iframeEventHandlers.iframeHeightRequest</code> function will be called. Iframe will be resized!. Besides resizing, you can add any event and convey messages between the iframe and the client. If you are creating a plugin or anything that loads inside an iframe, here are some tips from me. <ul> <li>Keep all the data in your window. Only share the needed ones with the client website. Never share sensitive data like user's data.</li> <li>Do all AJAX stuff in your iframe. </li> <li>Never use <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a> and give access to your website from others. Always use postMessage API.</li> </ul> I hope this article helped you to understand how to use Javascript with Iframes. I tried my best to explain what I learned while creating Hyvor Talk. If I missed something, I'll add it in the future. Also, If you like the article please share it and comment. Thank you. :) This post is originally posted in <a href="https://groups.hyvor.com/WebDevelopment/171/javascript-and-iframes">Web Developers Group</a> in Hyvor Groups

Top comments (1)

Fenix • Feb 5 '24

Thanks for sharing, ... Namaste ;.)