Question

目前我正试图赶上＆＃34;使用JavaScript在Web项目中可能发生的粘贴事件，以便处理粘贴的内容。众所周知（并且可能在stackoverflow上讨论过），如果没有黑客攻击，这是不可能的。

因此我使用hack在粘贴之前将选择设置为不同的（contenteditable）元素，获取内容并在之后恢复选择。这可以很好地工作，你可以在这里看到：

＆＃13;

document.addEventListener('paste', function(e) {
  var target = document.getElementById('el2');

  while (target.lastChild) {
    target.removeChild(target.lastChild);
  }

  var selection = window.getSelection();

  var newRange = document.createRange();
  newRange.setStart(target, 0);
  newRange.setEnd(target, 0);

  selection.removeAllRanges();
  selection.addRange(newRange);

  window.setTimeout(function() {
    console.log(target.innerHTML);
  }, 1);
}, true);

＆＃13;

#el1, #el2 {
  border:1px solid black;
  padding:5px;
  height:200px;
  margin-bottom:10px;
  overflow:auto;
}

＆＃13;

<div id="el1" contenteditable="true">Paste here</div>
<div id="el2" contenteditable="true">Should go here and be logged</div>

＆＃13;

问题是，在可能的情况下，粘贴的内容通常包含CSS样式（从办公室或网页粘贴），这会导致Web项目的样式被破坏。

要解决此问题，我尝试将粘贴重定向到iframe。使用iframe会将粘贴的样式与Web项目的样式分开，问题就会得到解决。

但是只要我将选择设置为iframe，示例就不再有效了。这里是另一个例子（如果你在这里运行代码作为html的一部分属于iframe，将无法工作）：

＆＃13;

document.addEventListener('paste', function(e) {
  var iframe = document.getElementById('iframe');
  var iframeWin = iframe.contentWindow;
  var iframeDoc = iframe.contentDocument;

  var target = iframeDoc.getElementById('el2');

  iframeWin.focus();

  var selection = iframeWin.getSelection();

  var newRange = iframeDoc.createRange();
  newRange.setStart(target, 0);
  newRange.setEnd(target, 0);

  selection.removeAllRanges();
  selection.addRange(newRange);

  window.setTimeout(function() {
    console.log(target.innerHTML);
  }, 1);
}, true);

＆＃13;

#el1 {
  border:1px solid black;
  padding:5px;
  height:200px;
  margin-bottom:10px;
  overflow:auto;
}

＆＃13;

index.html:
<div id="el1" contenteditable="true">Paste here</div>
<iframe id="iframe" src="paste_iframecontent.html"></iframe>

paste_iframecontent.html:
<html>
	<head></head>
	<body>
		<div id="el2" contenteditable="true">Should go here and be logged</div>
	</body>
</html>

＆＃13;

我猜一个文档中的粘贴事件不能被重定向＆＃34;进入一个不同的文件。我对吗？有没有办法让这个运行或解决＆＃34; CSS样式粘贴问题＆＃34;使用不同的方法？

使用JavaScript将粘贴事件重定向到iframe

0 个答案: