Prevent iFrame from changing location?

I've got a simple app that parses Tumblr blog templates. It's modeled after their customization screen and contains a header with some configurable options and an iframe. Every time an option changes, the app reloads the iframe, serializing the config form and updating the iframe's src with the serialized data as a query string.

This all works fine, except every time this happens, I am only able to reload the main index page with the changed options. If the user wants to view, say, a single post page by navigating away from the index, the template renders that page, only with the default options. In other words, the changed options do no persist while the user navigates the blog.

I've been able to have 'persisting changes' with an $('iframe').load() event like so:

$('iframe').load(function(){
  updateTheme();
});

The only problem is, as you can tell, this would wait for the iframe to fully render the page using the 开发者_StackOverflow社区default options, then re-renders it with the updated options. I mean... it works, but it's not really a great solution.

Does anybody know how I can prevent the iframe from loading, capturing the users desired location, then re-render the frame with the current options as represented in the header?

Any help would be greatly appreciated. Thanks in advance!

Are you hosting both the top-level page and the embedded iframe page? If so, there are some games you can play, but it's not pretty. For example you can rewrite links within the embedded iframe in order to pre-fill the config options, e.g. with something like:

$('iframe').load(function(){
  $('a', $('iframe')).each(function() {
    var new_url = this.attr("href");
    new_url += config_options;
    this.attr("href", new_url);
  });
});

Here's what I came up with:

var p = top || parent;

(function($){
  $('a').click(function(e) { 
    var prevent = e.isDefaultPrevented(),
        is_local = p.isLocal(this.href),
        is_hash = $(this).attr('href').match(/^#/);

    if(prevent || ! is_local || is_hash) return;
    e.prevenDefault();
    p.updateTheme(this.href);
    return false;
  });
})(jQuery);

My worry was that I would be affecting the javascript events attached to <a/> tags by the user, but apparently jQuery will detect default prevented events, even if they weren't prevented with jQuery itself. I tested it like this:

document.getElementById('test-link').onclick = function() {
    return false;
}

jQuery detects that the original event has been prevented, so I am just assuming I shouldn't continue.