Magic Inline Frames

Windows in a window

While not always the ideal solution, iframes are often a practical way to embed content from one site into another.

Normally, to change the source of an iframe, a web developer needs to go into the code and update the src attribute to point to a different web page. Well, with MagicEdit the content manager can easily do the same thing on the fly. Here's how it's done.

The Code

First, we'll define a block of code that's only visible when the site administrator is logged in. We'll use our usual cl_visible for that.

<div cl_visible="=CLManager.activeAccount:isAdmin">
  <h2>Set iframe source</h2>
  <p><b>Source:</b> <magicedit me_name="iframeSrc" me_plain></magicedit></p>

So here we have a DIV that will only show up when logged in. We set a MagicEdit text region using the plain text editor (hence the me_plain) that has an me_name of "iframeSrc". We'll use that name on the iframe declaration itself to dynamically pull the value that the user inputs for the source of the iframe.

Elsewhere on the page (or the site, for that matter), you can put the iframe code itself. Here is what it might look like:

<iframe cl_visible="=$iframeSrc" cl_src="$iframeSrc" width="800" height="600"></iframe>

The cl_visible makes sure the iframe doesn't show up unless the user inputs a value for the iframe source. The real magic is the cl_src="$iframeSrc" snippet. MagicEdit will inject whatever is stored in the MagicEdit element called "iframeSrc" as the src attribute of the iframe. It knows to do this because we wrote cl_src, and bound it to "iframeSrc". If we had put cl_monkey="$iframeSrc" instead, it would write in an attribute called "monkey", which isn't very useful but shows you how dynamic attributes can work.

Try it out in Demo mode

Try managing a test page by clicking on this link.