A jQuery plugin to replace iframes with divs containing their source by loading via ajax. Benefits use parent page's css and have an auto height to your iframe.

jquery.iframe_to_div.js

/**
 * Convert iframes to divs via ajax iframe_to_div jQuery Plugin
 *
 * Uses javascript to replace iframes with divs containing their source content
 * by loading via ajax. If you use this to load vanilla html snippets, this has the
 * effect of applying the page's css to your vanilla html snippet.
 *
 * This will not work if the iframe src is not a relative link due to ajax restrictions across domains.
 *
 * As an example:
 *
 * This html snippet is available at http://website/vanilla.html
 * @code
 *  <!--this table has no styling on it's own, but when loaded via ajax, the
    parent page's css will be applied magically!-->
 *  <table>
 *    <thead><tr><th>Unstyled header</th></tr></thead>
 *    <tr><td>Unstyled table cell</td></tr>
 *  </table>
 * @endcode
 *
 * This is part of the index.html page
 * @code
 *   <iframe src="/vanilla.html"></iframe>
 * @endcode
 *
 * By adding the following js to index.html, the iframe is replaced with the
   snippet from vanilla.html and the css of index.html is applied.
 * @code
 *  $('body').iframe_to_div();
 * @endcode
 *
 * Or you can target a specific iframe directly. The iframe has an id =
   #my-replaceable-iframe
 * @code
 *  $('#my-replaceable-iframe').iframe_to_div();
 * @endcode
 *
 * @return $(this)
 *
 * @author Aaron Klump, In the Loft Studios, LLC
 * @see http://www.intheloftstudios.com
 * @see http://gist.github.com/aklump/5470863
 */
(function($) {
  $.fn.iframe_to_div = function(options) {
    var $context = $(this);

    var settings = $.extend( {
      'loading': 'Loading content...'
    }, options);

    if (!$context.is('iframe')) {
      $context = $context.find('iframe:not(.iframe-to-div-processed)')
    }
    else if ($context.hasClass('iframe-to-div-processed')) {
      return $(this);
    }
    $context.each(function() {
      var $iframe = $(this);
      var $loading = false;
      if (settings.loading) {
        $loading = $('<div><div class="inner">' + settings.loading + '</div></div>');
        $iframe.after($loading.addClass('iframe-to-div-loading'));
      }
      $iframe.hide();

      var src = $iframe.attr('src');
      $.get(src, function(data) {
        $iframe
        .addClass('iframe-to-div-processed')
        .replaceWith(data)
        $loading.remove();
      });
    });

    return $(this);
  };
})(jQuery);

Hi

I am doing a conversion from iframes to div. The content src being loaded is coming from html and xml files. The pages containing the iframes are .JSP pages. It is a two-column layout with header full-width div across the top, a left navigation list div and a main content div. These three sections were the iframes. I am also using bootstrap for fluid layout. Using this plugin, (and the bootstrap class names for styling the fluid layout (span3, span9, etc.), I have wrapped the iframes in divs (because that's what looks like is being done in the commented code above -- iframe tags are still being used for the src attribute).

After making the above edits and adding the script, the divs do not display scrollbars when the content exceeds the window size (in iframes, you get scrollbars). How do I fix this? My users can not see all of the content because it is being cut off at the bottom with no way to scroll down.

Thanks.