javascript - Prevent IFrame Navigation - Stack Overflow

admin管理员组

文章数量:1279046

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 acplish 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.

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 acplish 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.

• javascript
• html
• iframe

Share Improve this question Follow asked Mar 6, 2013 at 22:46 user187676user187676 4

• convert all links to spans with onclick events – el Dude Commented Mar 6, 2013 at 22:48
• 2 If you are writing the html for the iframe document, you should be able to put a <base target="_blank"> element in the head. This will open a new window or tab for links clicked in the iframe. – kennebec Commented Mar 7, 2013 at 0:06
• Didn't know that I could set a target in base. You should have posted this as an answer. – user187676 Commented Aug 5, 2013 at 14:54
• sandbox property of iframes is now supported by IE10+ and all major browsers: caniuse./#feat=iframe-sandbox – d2vid Commented Mar 24, 2015 at 0:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./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.

For the page the iframe is hosted in, define a CSP that restricts the child-src to a specific source, such as a domain. FYI this doesn't work for Internet Explorer. Here's a related answer.

You could loop through all the links in the iframe and add target="_blank" to them.

(Excuse me but I only know how to do this in JQuery so sorry for linking the example in this without it being tagged in the question):

$("#iframeID").contents().find("a").each(function() {
    $(this).attr("target", "_blank");
});

Example: http://jsfiddle/yP7Nd/ - (ignore the bit of JS above my JQuery code, I had to do this to get some IFrame content to load properly).

You should be able to replace all links with their displayed text, something like:

var links = document.links;
var i = links.length;
var link, text, node;

while (i--) {
  link = links[i];
  text = link.textContent || link.innerText || '';
  node = document.createTextNode(text);
  link.parentNode.replaceChild(node, link);
}

Note that the links collection is live, hence the reverse loop.

本文标签： javascriptPrevent IFrame NavigationStack Overflow