Prevent IFrame Navigation

Question

I use an iframe to display HTML email contents by writing a HTML string to it's content document via JS. I don't want the user to navigate inside that iframe if he clicks a link in the displayed email. Now I have these options:

1. Open links in a new browser window or tab (preferred)
2. Prevent all navigation (suboptimal, only if no other option left)
3. Better option I don't know about?

How could I accomplish any of those 2 options?

I know that HTML5 introduced a sandbox property, but unfortunately that only works in Chrome and Safari, so that's not an option.

Answer 1

If the iframe is from a different origin, this method will prevent navigation by resetting the iframe source if it changes:

  var $iframe = $('iframe');
  var iframeUrl = 'http://example.com/foo';
  var iframeLoaded = false;
  $iframe.on('load', function () {
    if (!iframeLoaded) {  # Allow initial load of iframe.
      iframeLoaded = true;
      return;
    }

    # Reset iframe location back to original source to prevent navigation.
    iframeLoaded = false;
    $iframe[0].src = iframeUrl;
  });

Unfortunately, there's no way to detect the start of the iframe load, so it'll briefly flash the new content before navigating back. Also, be aware that this will break the browser back button.