强制 IFrame 中的任何 HREF 使用其父级作为目标

Question

我目前正在使用 IFrame 将用户生成的内容放在沙箱中。这消除了我们主样式表的任何样式问题。

但是，当用户使用我们的富文本编辑器生成链接时，我们希望该链接在父级中打开，而不仅仅是在 IFrame 中打开该链接。我知道您可以将目标设置为父级，但我们无法控制用户以及他们在内容中输入的内容。

有没有办法劫持 IFrame 内的 HREF，以便它们都以父级为目标而不修改它们？或者使用一些可以普遍注入的 Javascript，这样我就不需要抓取所有内容并以编程方式替换目标？

理想情况下，一个简单的脚本将是最好的解决方案。

想法？

最终解决方案

我使用了我选择的答案的变体......它让我朝着正确的方向前进。

<script>
  Event.observe(window, 'load', function() {
    $$('a').each(function(e) {
      e.writeAttribute('target', '_parent');
    });
  });
</script>

它位于包含内容的 IFrame 内。它最终成为该任务最简单的解决方案。

Answer 1

iframe 中的同一域？是的。

<script type="text/javascript">
function hijacklinks(iframe){
  var as = iframe.contentDocument.getElementsByTagName('a');
  for(i=0;i<as.length;i++){
    as[i].setAttribute('target','_parent');
  }
}
</script>

<iframe src="http://example.com/test.html" onload="hijacklinks(this)"></iframe>

iframe 中的不同域？不。

<iframe src="http://www.google.com/search?q=google+happy" onload="hijacklinks(this)"></iframe>

产生“获取属性 HTMLDocument.getElementsByTagName 的权限被拒绝”。

也许有办法解决，但至少使用简单的 JavaScript，它们可以防止 iframe 破坏网站（想象一下银行网站周围的恶意框架，您就可以理解为什么）。

Answer 2

使用它来创建它，您将可以访问带有 $body 变量的任何部分：

$(function() { 
        var $frame = $('<iframe style="width:200px; height:100px;">'); 
        $('body').html( $frame ); 
        setTimeout( function() { 
            var doc = $frame[0].contentWindow.document; 
            var $body = $('body',doc); 
            $body.html('<h1>Test</h1>'); 
        }, 1 ); 
    }); 

所以你可以做这样的事情

$('a', $body).attr('target', '_parent');

在这里找到：http ://groups.google.com/group/jquery-en/browse_thread/thread/fb646741a6192540