如何使克隆的DOM元素JSON可序列化 [英] How to make cloned DOM element JSON serializable

问题描述

我目前正在使用 GitHub的Electron 框架，我正在尝试发送一个克隆的DOM元素通过 webview 中的预加载脚本/＃event-ipc-messagerel =nofollow> IPC消息传递系统到我的渲染器进程。虽然DOM元素无法转换为JSON，因此接收到的消息正在打印出一个空的Object（ Object {} ）。这是我的代码：

Preload.js

  var ipc = require（electron）。ipcRenderer; 
 
函数getData（element，trait）{
 if（trait ===id）{
 var elem = document.getElementById（element）; 
} 
 else {
 var elem = document.getElementsByClass（element）; 
} 
 var cloned = elem.cloneNode（true）; 
 ipc.sendToHost（retrieve，克隆）; 
 console.log（sent）; 
} 
 
 ipc.on（incoming，function（event，initData）{
 getData（initData.selected，initData.trait）; 
}）; 
  

Renderer.js

$ pre> $ code loader.addEventListener（ipc-message，function（e）{
if（e.channel ===retrieve）{
console .log（e.args [0]）; //我想要这个打印出DOM对象
}
}）;

loader.addEventListener（dom-ready，function（）{
console.log（loaded）;
var x = marks.list [i];
loader.send（incoming，x）;
loader.openDevTools（）;
i ++;
}）;

我不能选择我需要的DOM，因为我需要 $ code> initData.selected 的元素中的所有内容，它附加了CSS。

是否有潜在的修复为了这？如果没有，那么有没有办法在这两个进程之间发送一个DOM元素，可能还有另一个程序或node.js模块？谢谢。

解决方案

如果IPC只采用字符串参数，那么你应该发送HTML，这意味着使用

ipc.sendToHost（retrieve，cloned.outerHTML）;

然后这个

  var html = e.args [0]，
 dummy = document.createElement 'div'），
克隆; 
 dummy.innerHTML = html; 
 //这将给你发送的所有内联CSS 
 cloned = dummy.childNodes [0]的节点; 
 
 console.log（克隆）; 
  

注意：我们只能传递内联样式，文档级别无法使用html

序列化

I'm currently working with GitHub's Electron framework, and I'm trying to send a cloned DOM element from a preloaded script in a webview through their IPC messaging system to my renderer process. Though, DOM elements are not able to be converted to JSON, and thus the received message is printing out an empty Object (Object {}). Here's my code:

Preload.js

var ipc = require("electron").ipcRenderer;

function getData(element, trait){
  if(trait === "id"){
    var elem = document.getElementById(element);
  }
  else{
    var elem = document.getElementsByClass(element);
  }
  var cloned = elem.cloneNode(true);
  ipc.sendToHost("retrieve", cloned);
  console.log("sent");
}

ipc.on("incoming", function(event, initData){
  getData(initData.selected, initData.trait);
});

Renderer.js

loader.addEventListener("ipc-message", function (e) {
  if (e.channel === "retrieve") {
    console.log(e.args[0]);   // I want this to print out the DOM object
  }
});     

loader.addEventListener("dom-ready", function() {
  console.log("loaded");    
  var x = marks.list[i];
  loader.send("incoming", x);    
  loader.openDevTools();
  i++;    
});

I can't just pick what I need out of the DOM, as I need everything inside the initData.selected's element and it's attached CSS.

Is there a potential fix for this? And if not, then is there any way possible to send a DOM element between these two processes, possibly with another program or node.js module? Thanks.

解决方案

If the IPC only takes string arguments, then you should send the HTML instead, which means, use

ipc.sendToHost("retrieve", cloned.outerHTML);

and then this

var html = e.args[0],
    dummy = document.createElement('div'),
    cloned;
dummy.innerHTML = html;
// this will give you the node that you sent with all the inline CSS
cloned = dummy.childNodes[0];

console.log(cloned );

Note: We can only pass inline styling, the CSS loaded at the document level cannot be serialized with html

这篇关于如何使克隆的DOM元素JSON可序列化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！