Question

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

在新的浏览器窗口或标签页（首选）
防止所有导航（次优，仅在没有其他选项的情况下）
我不知道的更好的选择？

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

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

Answer 1

如果iframe来自不同的来源，则此方法会在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加载的 start ，因此在导航回来之前，它会暂时刷新新内容。另外，请注意这会破坏浏览器后退按钮。

Answer 2

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

Answer 3

您可以遍历iframe中的所有链接，并向其添加target="_blank"。

（对不起但我只知道如何在JQuery中执行此操作，所以很抱歉在没有标记的情况下链接此示例）：

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

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

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

请注意，links collection是有效的，因此是反向循环。

防止IFrame导航

4 个答案: