防止 IFrame 导航

Question

我使用iframe 通过JS 将HTML 字符串写入其内容文档来显示HTML 电子邮件内容。如果用户单击显示的电子邮件中的链接，我不希望用户在该 iframe 内导航。现在我有这些选择：

1. 在新的浏览器窗口或标签页中打开链接（首选）
2. 阻止所有导航（次优，仅当没有其他选项时）
3. 我不知道更好的选择？

我怎样才能完成这两个选项中的任何一个？

我知道HTML5 引入了sandbox 属性，但不幸的是，它只适用于Chrome 和Safari，所以这不是一个选项。

Answer 1

对于 iframe 所在的页面，定义一个 CSP，将 child-src 限制为特定来源，例如域。仅供参考，这不适用于 Internet Explorer。这是一个相关的answer。

Answer 2

如果 iframe 来自不同的来源，此方法将通过重置 iframe 源（如果它发生更改）来阻止导航：

  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;
  });

很遗憾，无法检测到 iframe 加载的开始，因此它会在返回之前短暂闪烁新内容。另外，请注意，这会破坏浏览器的后退按钮。

Answer 3

您应该能够将所有链接替换为其显示的文本，例如：

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);
}

请注意，links collection 是实时的，因此是反向循环。

Answer 4

您可以遍历 iframe 中的所有链接并将target="_blank" 添加到它们。

（对不起，我只知道如何在 JQuery 中执行此操作，很抱歉在此链接示例而没有在问题中标记）：

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

示例：http://jsfiddle.net/yP7Nd/ -（忽略我的 JQuery 代码上方的 JS 位，我必须这样做才能正确加载一些 IFrame 内容）。