Purpose of this document

The purpose of this document is to explain the intricacies and offer possible solutions to some common problems that users face when incorporating iframe content into mobile adaptions.

Prerequisites

  • A working knowledge of HTML, CSS, and JavaScript
  • An understanding of AJAX

The challenges with iframes

The iframe element present a special set of user-experience related challenges on mobile. There are two distinct issues:

  1. The iframe content must also be formatted for the mobile device or horizontal overflow may occur inside of the iframe requiring the visitor to "scroll" inside of the iframe to reach important content. This is both a user experience problem and an eyesore.

  2. If the iframe size in the parent page is smaller than the dimensions of the document contained within the iframe, horizontal and/or vertical scrolling will be required inside of the iframe to reach some content. Most smartphones use a touch interaction methodology that does not display scrollbars. When a site user scrolls using a touch gesture, the smartphone must decide which scrollable element will receive the scroll event. If the visitor is touching inside of the iframe, the iframe will be scrolled. If the visitor is touching outside of the iframe, the parent document is scrolled. This behavior results in a very poor experience. Mobile phones have very small screens, it's easy for an iframe to take up most or all of the screen making it almost impossible to scroll the parent frame. Even if the iframe is small, the visitor is likely to be confused if gestures fail to scroll the parent document. With no visible scrollbars to indicate the iframe is a scrollable element, there is very little feedback to a visitor to help them understand the problem.

The best solution: get rid of iframes wherever possible

Most behaviors that are offered by iframes can be replaced with other more modern HTML techniques such as AJAX calls, JSONP etc. Eliminating iframes where possible from your site will make your desktop and mobile site more maintainable.

Convert iframe calls to AJAX

If your iframe is originating from the same domain as the parent window, you have the option of fetching the content of the iframe using an AJAX call instead of using an iframe. When you specify your content selector in the Mobify template, you'll want to find the iframe, extract the iframe src, and then make an $.ajax call to fetch the results. You can then apply a template to the content and insert the resulting HTML directly into the parent document, eliminating the iframe completely and resolving the problem.

Solving challenge 1: Mobifying iframe content to eliminate horizontal scrolling

Challenge 1 can be addressed by Mobify-ing iframe content. You can place the Mobify tag in the iframe HTML, then use a Mobify template to style the content.

Solving challenge 2: fitting the iframe to the content

The second alternative, for example if your iframe content is coming from a different domain and therefore cannot be made into an AJAX call, is to make sure the iframe is big enough to contain the document within. There will no longer be any need for scrolling inside of the iframe, and therefore all scroll events can be interpreted by the parent document.

Use CSS to set height to 100%

This option can work for many types of content but it requires that you have complete CSS control of the iframe content and the page containing the iframe. First, set the iframe element style to a height of 100%.

E.g. <iframe style="height:100%"\>

Now inside of the iframe CSS, set the following style:

<style type="text/css">
    html {
        height: 100%;
    }
    body {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }
</style>

Getting the iframe size: using a fixed size for iframe content

When possible, this is the easiest way to go. If you can make sure your iframe is always a certain number of pixels or smaller, then you can just make sure the container is larger and the problem is solved. Unfortunately, it's rare that you can do this. Variable font sizes, dynamically generated content etc. can all lead to an iframe of various sizes.

Communicate the iframe document size to the parent using messaging and resize the iframe element

After the iframe content has finished rendering, you can use window.postMessage to communicate the window.innerHeight of the iframe to the parent window. The parent window can then execute a small script that changes the height of the iframe element to be large enough to contain all of the iframe's content.

Last Edited