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

标签 javascript jquery iframe href target

我目前正在使用 IFrame 对网站上用户生成的内容进行沙盒处理。这消除了我们主要样式表的任何样式问题。

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

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

理想情况下,一个简单的脚本放在一个地方是最好的解决方案。

想法?

结束解决方案

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

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

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

最佳答案

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 与网站混为一谈(想象一下银行网站周围的恶意框架,您就会明白原因)。

关于javascript - 强制 IFrame 中的任何 HREF 使用其父级作为目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1225245/

相关文章:

css - 如何避免iframe嵌入代码?

jquery - 尝试使用 jQuery 模式弹出窗口通过 iframe 查看 pdf 文件

jquery - magento、wordpress 和 ajax

javascript - 使用鼠标中键按钮提交表单

javascript - NodeJS动态读取目录

javascript - 将变量标志重置为原始状态

javascript - 如何仅在完成所有多选选择后才触发更改事件

javascript - 删除生成的字段 javascript

javascript - 函数作为 JavaScript 的返回类型

javascript - 将动画添加到 jQuery toggleClass() 的问题