"无法对'选择'执行'addRange'：参数 1 不是类型 'Range'

Question

我想将一个浏览器中可编辑内容的div中的文本选择镜像到另一个浏览器。代码的简化和相关部分是：

在源浏览器中：

function someFunc() {
if (window.getSelection().isCollapsed)
return;
var range = window.getSelection().getRangeAt(0);

//Send range over websockets to another browser
sendToAnotherBrowser(...) //Send range
}

在远程浏览器中，我执行以下代码：

var sel = window.getSelection();
sel.addRange(range);  //Where range is the range transmitted over webSockets

我得到以下错误：

"Failed to execute 'addRange' on 'Selection': parameter 1 is not of type 'Range'

问题：如何传输"；范围"；对象通过websocket？它不是要进行字符串化和发送的JSON对象。我可以以某种方式序列化它，将其更改为base64，然后在接收端反向处理吗？

Answer 1

您不能序列化对象本身，但您可以创建一个包含Range对象数据的对象，将其发送到套接字，然后从那里构建一个新的Range对象。

const sendRange = range => {
const {
startContainer,
endContainer,
startOffset, 
endOffset, 
collapsed
} = range;
const package = JSON.stringify({
startNodeId: startContainer.id,
endNodeId: endContainer.id,
startOffset, 
endOffset
collapsed
});
sendToAnotherBrowser(package);
}
const range = window.getSelection().getRangeAt(0);
sendRange(range);

然后在其他地方接收它，在那里你可以构建一个新对象。

const buildRange = package => {
const { 
startNodeId,
endNodeId,
startOffset, 
endOffset, 
collapsed 
} = JSON.parse(package);
const selection = window.getSelection();
const range = document.createRange();
const startNode = document.getElementById(startNodeId);
const endNode = document.getElementById(endNodeId);
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
if (collapsed) {
range.collapse();
}
selection.addRange(range);
}