3

我（和许多其他人一样）正在尝试清理我粘贴到 contentEditable iframe 中的文本。我没有使用 jQuery（它是一个非常古老的代码库），并且处理程序的附加方式如下：

if (isIE) {
  iframe.attachEvent("onpaste",handler);
}
else {
  iframe.addEventListener("paste",handler,true);
}

这在 Firefox 和 Opera 中有效，但在 IE 10 和最新版本的 Chrome (29.0.1547.62) 中，从不调用处理程序；我在处理程序的第一行放置了一个断点，但是当我粘贴一些文本时，它没有到达断点并且粘贴的文本只是出现（未清理）。我尝试在 IE 9 模式下使用 IE10 并没有什么区别。其他处理程序似乎按预期调用。

有谁知道这里可能发生了什么？

蒂亚...

4

2 回答 2

1

事实证明，iframe 加载了一个空白页面，然后以编程方式填充了内容。在重写 iframe 文档之前添加了事件侦听器，这就是问题的原因。需要在重写 iframe 内容后添加侦听器。这是一个测试用例：

<html>
<head>
<title>Paste test&</title>
<script>
  function handler() {
    alert("Paste");
  }

  function register(iframe) {
    //
    //  IE10 requires addEventListener to be used, so this
    //  is preferable to doing browser detection...
    //
    if (window.addEventListener) {
      iframe.addEventListener("paste",handler,true);
    }
    else {
      iframe.attachEvent("onpaste",handler);
      }
  }

  function test() {
    var iframe = document.getElementById("frm").contentWindow;
    try {
      var doc = iframe.document;
      if (!doc) {
        setTimeout(test,50);
        return;
      }
//      register(iframe);   // this won't work!
      doc.open();
      doc.write("<html><body>Paste text here: []</body></html>");
      doc.close();
      doc.body.contentEditable = true;
      register(iframe);     // this works!
    }
    catch (e) {
      setTimeout(test,50);
      return;
    }
  }
</script>
</head>
<body onLoad="test()">
Here is the iframe:
<p>
<iframe id="frm" src="blank.html" width="400" height="200"></iframe>
</body>
于 2013-09-03T11:40:29.257 回答
0

我猜你iframe指的是iframe主页上的元素（尽管在这种情况下，即使在 FF23 中我也无法完成这项工作）。您可以使用跨浏览器的方式来引用其中的window对象iframe：

HTML：

<iframe name="iframe" ...></iframe>

JS：

var iframe = window.frames['iframe'];
if (window.addEventListener) {
  iframe.addEventListener('paste', handler);
}
else {
  iframe.attachEvent('onpaste', handler);
}

还要注意特征检测而不是浏览器检测。

Chrome 是什么，我不确定，我无法在本地测试代码，因为看起来-allow-access-to-files在 Chrome29 中不起作用。

于 2013-09-02T19:08:22.650 回答