javascript - 防止 IFrame 导航

Question

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

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

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

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

Answer 1

如果 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 2

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

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

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

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

Answer 3

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

Answer 4

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

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

请注意，链接集合是实时的，因此是反向循环。