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

Basic Recursion Example in JavaScript

Problem :  I've been having to write solutions which required some sort of recursion.  The last recursion assignment I had to write was a homework assignment about 10 years ago. I remembered the concept, but forgot how to write it. Solution :  Here’s a simple example of recursion. I start with an array, and after I fire the function, I remove that index from the array, so it shrinks. Once the array is empty, recursion stops.  Pretty straight forward! Code : let books = [ 'Chosen by God', 'Holiness of God', 'Essential Truths', 'Justified by Faith' ]; function readBooks(b){ while (b.length > 0){ console.log('I\'v read ' + b[0]); b.shift(); readBooks(b); } } readBooks(books);
Post a Comment
Read more