Skip to main content

iframes - Child to Parent Communication

Problem:

I wanted to embed a form into an webpage.  Easy enough!  As I tested the form in the iframe, I noticed the form height would change during validation. As error messages pop up, the form height would increase, and before I knew it, half the form was hidden in the iframe.  I needed to figure out a way to adjust the iframe according to the content height in the iframe.

Solution:

I discovered a way for an iframe and it’s parent to communicate.  In the iframe content (child), I figured out a way to post a message (body height) to the parent. When an error occured, I would run this code:

let body = document.getElementsByTagName('body')[0];
parent.postMessage('formHeight', body.offsetHeight);

In the parent page, I set up an event handler to always be listening for a message from the child.  When the parent detects a message, I can receive and use the data for whatever I want.  In my case, change the height of the iframe:

                window.addEventListener('message', function(e){
                                let iframe = document.getElementById('iframe');
                                iframe.style.height = e.data + 'px';
                });

Warning:

This solution is not cross domain friendly.  You’ll get a lovely CORS error.

Comments

Post a Comment

Popular posts from this blog

Resolved Sitecore "If you publish now, the selected version will not be visible on the web site" warning

The Problem:   Unable to publish any Sitecore item within a particular site, even out of the workflow. Rather, a warning reads " If you publish now, the selected version will not be visible on the web site " What I've Discovered: I couldn't publish any item in the site, not just one or two I viewed all parent items of the items in question The main home page displayed a different warning " This item will never be published because it's publishable option is disabled " Another sitecore developer reminded me of the standard fields option View --> check standard fields to show all standard page fields Found out that somebody checked Never Publish within the publishing section The Fix: After I unchecked the checkbox and saved the change, I was able to publish again.  :) Conclusion: Looks like another Sitecore user thought the children items would not be affected by this change.  Lesson  learned.
Post a Comment
Read more

[Resolved] Sitecore ParseException: End of string expected at position...

Problem:  I have a line of code that uses Sitecore Fast Query to pull all items + children starting with a site item, like so: Item [] allItems = db.SelectItems( "fast:" + sitecorePath + "//*" ); Unfortunately, I would get a Sitecore parsing error at runtime: ParseException: End of string expected at position... Turns out Sitecore doesn't like hyphens ('-') in any sitecore path when using fast query, which I have a few distributor sites in a folder which contained hyphens. Solution: I create a simple method that resolves a sitecore path to be Sitecore fast query friendly:             string sitecorePath = "" ;             if (siteItem.Paths.FullPath.Contains( "-" ))             {                 String [...
Post a Comment
Read more

Create a File Upload Service using Node.js / Express / Multer

Problem:    I needed to create a form that essentially uploads a file to a server, then posts the rest of the form data to a second server with the new file name. In other words, post the image to an “Image” server, then posts the form data (with the file URL) to a “Form Data” server. Solution:  Create an Express server that uses the “Multer” library to accomplish this. The Code: Create the express server and have it listen on a specific port var express = require( 'express' ); var app = express (); app . listen ( 3313 , function (){     console . log ( 'listening on port 3313' ); }); Install Multer.  Read here: https://www.npmjs.com/package/multer Include Multer to your express app.  We’ll be tweaking the storage properties so you can name the file whatever you like. At the end, you should have an “upload” object you’ll be using in the next step. be sure to change the file destination of your choice. var expre...
6 comments
Read more