Using iFrame Code in the WYSIWYG Module

Some are using inline iFrame tags to pull content into the WYSIWYG modules. You are welcome to do this. Be aware, however, that we are not sure it works for all devices, so please do test on an actual device before utilizing the following instructions.

Why would you want to use iFramed content in an app? The primary reason is so that you can update an app on the fly without needing to upload a new version to the marketplaces. If you have iFramed content, you may simply upgrade the content on your website, and your app will be automatically upgraded without having to modify or rebuild it.

The downside of using iFrames is that the content is not available unless the user is connected to the Internet.

How iFramed Content Works

Short for inline frame, an iFrame is an HTML document that is embedded in another HTML document. The webpage URL is enclosed in <iframe> tags like this:

<iframe src=” width=”320height=”680” ></iframe>

<iframe src=” width=”320height=”680” frameborder=”0” ></iframe>

<iframe src=” width=”320height=”680” frameborder=”1 scrolling=”no”></iframe>

While there are several options to choose from when using iFrames on web pages, not all are suitable for apps. In our testing, we have found the following have worked for us.

src=”(URL of initial iFrame content)”
width=(frame width, % or pixels)
height=(frame height, % or pixels)
align=[ top | middle | bottom | left | right | center ] (frame alignment, pick two, use comma)
frameborder=[ 1 | 0 ] (frame border, default is 1)
scrolling=[ yes | no | auto ] (ability to scroll)

Note: you should NEVER frame content from web pages you do not own, or have express written permission to do so. You could end up in court and that’s not a good place to be, is it?

So, putting that all together in a WYSIWYG module, you would customize the WYSIWYG module something like this:

1. Click to customize the module and then, click on the HTML link on the right hand side top of the editor box.

2. Type the iFrame code into the html editor box – like this:




3. Scroll to the bottom and click the Update button.

4. Now, when you look at the editor box, it will show the web page content that you have pulled in with the iFrame tags.

Screen Shot 2016-05-09 at 12.51.15 PM

5. By scrolling on down, you can add an image to appear above or below the iFramed content.

Screen Shot 2016-05-09 at 1.04.21 PM

In this app, I chose to put an image above the text so, when we look at the full iFramed WYSIWYG module, it now looks like this:

Screen Shot 2016-05-09 at 1.07.50 PM


Note: For this demo, we created a very plain web page and uploaded it to a server. It does not have headers or footers. It is just a plain html page. If you use iFrames to pull in web pages that have headers, footers and nav bars, it will not give you this clean, crisp appearance and will make your app look cheap.

If you are going to use iFrames – do it right. Create a mobile-friendly web page and pull that web page into the app; so not try to pull a webpage into the app that has menus and side bars as it will not provide you with a good user experience.

Choosing the Correct Size – Height and Width

If the web page you are framing is optimized for mobile, then you can use a code like:

<iframe src=” width=”100%height=”680” frameborder=”0 scrolling=”no”></iframe>

In that way your app will work on the different sizes of mobile apps and still look great. If the page is not optimized for mobile, however, you cannot do this and must choose a width as well as a height for the iFramed content.

In Case You Missed it … you should NEVER frame content from web pages you do not own, or have express written permission to do so. Lawsuits are not fun, and our advice is – don’t even go there!