Javascript 从空SVG文档创建HTML页面的正确方法_Javascript_Html_Dom_Svg_Google Chrome Extension

Javascript 从空SVG文档创建HTML页面的正确方法

javascript html dom svg google-chrome-extension

Javascript 从空SVG文档创建HTML页面的正确方法,javascript,html,dom,svg,google-chrome-extension,Javascript,Html,Dom,Svg,Google Chrome Extension,我有一个私人使用的扩展，有时需要将svg文档转换为html文档如果我检测到页面不包含body元素，并且location.href包含文本“.svg”（该文档是一个svg文档），我将尝试以下操作 document.removeChild(document.firstChild); var body = document.createElement("body") var html = document.createElement("html"); html.appendChild(documen

我有一个私人使用的扩展，有时需要将svg文档转换为html文档

如果我检测到页面不包含body元素，并且

location.href

包含文本“.svg”（该文档是一个svg文档），我将尝试以下操作

document.removeChild(document.firstChild);
var body = document.createElement("body")
var html = document.createElement("html");
html.appendChild(document.createElement("head"));
html.appendChild(body);
document.appendChild(html);

这似乎有效。检查页面时会显示标准文档

<html>
   <head></head>
   <body></body>
</html>

我得到一个

uncaughttypeerror:未能设置“Document”的“body”属性：提供的值不是“HTMLElement”类型。
在contentscript.js:8712上
我似乎无法从一个空文档创建一个可用的HTML文档。
可能吗
我真的需要该页面，因为重定向将删除域和相关会话。
请查看使用哪个
<svg xmlns="http://www.w3.org/2000/svg">
    <script type="application/ecmascript">
      document.removeChild(document.firstChild);
      var body = document.createElementNS("http://www.w3.org/1999/xhtml", "body")
      var html = document.createElementNS("http://www.w3.org/1999/xhtml", "html");
      html.appendChild(document.createElementNS("http://www.w3.org/1999/xhtml", "head"));
      html.appendChild(body);
      document.appendChild(html);
      var i = document.createElementNS("http://www.w3.org/1999/xhtml", "i");
      i.appendChild(document.createTextNode("Italic text"));
      document.body = body; // Needed for Firefox. Not needed for Chrome
      document.body.appendChild(i);
    </script>
</svg>


document.removeChild（document.firstChild）；
var body=document.createElements（“http://www.w3.org/1999/xhtml“，“正文”）
var html=document.createElements（“http://www.w3.org/1999/xhtml“，”html“）；
appendChild（document.createElements（“http://www.w3.org/1999/xhtml“，”头“）；
appendChild（body）；
文件.appendChild（html）；
var i=document.createElements（“http://www.w3.org/1999/xhtml“，”我“）；
i、 appendChild（document.createTextNode（“斜体文本”）；
document.body=body；//Firefox需要。不需要铬
文件.正文.附件（一）；

将元素放入正确的命名空间中
SVG文档（即非XHTML、XML文档）中的document.createElement（）将在空名称空间中创建元素，根据需要在HTML名称空间中创建这些元素。
请参见使用
<svg xmlns="http://www.w3.org/2000/svg">
    <script type="application/ecmascript">
      document.removeChild(document.firstChild);
      var body = document.createElementNS("http://www.w3.org/1999/xhtml", "body")
      var html = document.createElementNS("http://www.w3.org/1999/xhtml", "html");
      html.appendChild(document.createElementNS("http://www.w3.org/1999/xhtml", "head"));
      html.appendChild(body);
      document.appendChild(html);
      var i = document.createElementNS("http://www.w3.org/1999/xhtml", "i");
      i.appendChild(document.createTextNode("Italic text"));
      document.body = body; // Needed for Firefox. Not needed for Chrome
      document.body.appendChild(i);
    </script>
</svg>


document.removeChild（document.firstChild）；
var body=document.createElements（“http://www.w3.org/1999/xhtml“，“正文”）
var html=document.createElements（“http://www.w3.org/1999/xhtml“，”html“）；
appendChild（document.createElements（“http://www.w3.org/1999/xhtml“，”头“）；
appendChild（body）；
文件.appendChild（html）；
var i=document.createElements（“http://www.w3.org/1999/xhtml“，”我“）；
i、 appendChild（document.createTextNode（“斜体文本”）；
document.body=body；//Firefox需要。不需要铬
文件.正文.附件（一）；

将元素放入正确的命名空间中
SVG文档（即非XHTML、XML文档）中的document.createElement（）将在空名称空间中创建元素，在HTML名称空间中根据需要创建元素。
以下是我使用的：
{
    let cENS=document.createElementNS.bind(document,"http://www.w3.org/1999/xhtml"), //For the namespace URI, there's also `document.lookupNamespaceURI(null);`.
        html=cENS("html"),head=cENS("head"),body=cENS("body");
    html.append(head,body); //Instead of `.appendChild()` for each node.
    document.documentElement.replaceWith(html); //“Only one element on document allowed.”
}

以下是我使用的：
{
    let cENS=document.createElementNS.bind(document,"http://www.w3.org/1999/xhtml"), //For the namespace URI, there's also `document.lookupNamespaceURI(null);`.
        html=cENS("html"),head=cENS("head"),body=cENS("body");
    html.append(head,body); //Instead of `.appendChild()` for each node.
    document.documentElement.replaceWith(html); //“Only one element on document allowed.”
}

您是否需要完全删除文档以使用新文档，或者您是否可以为正文
创建新内容？@ScottMarcus我需要删除svg内容。这就是页面开头的
及其所有内容contains@aw04您是从svg文档开始的吗？地址栏上有“不，对不起，你说得对。据我所知，svgAs出现了错误。您是否需要完全删除该文档以使用新文档，或者您是否可以为正文创建新内容？@ScottMarcus我需要删除svg内容。这就是页面开头的
及其所有内容contains@aw04您是从svg文档开始的吗？地址栏上有“不，对不起，你说得对。据我所知，svgAs的错误是不可能实现的。是的，名称空间是问题所在。我能够编写一个新的DOM，但无法解析任何HTML。您还可以使用.replaceChild（）
而不是.removeChild（）
和（仅供参考），您可以使用var newDoctype=document.implementation.createDocumentType（'html'，''）创建一个新的DOCTYPE
；document.insertBefore（newDoctype，document.childNodes[0]），但这不会有任何好处，因为必须重新加载文档才能处理它。谢谢，我有一个工作的HTMLDocument，尽管现在我必须使用document.createElements（“http://www.w3.org/1999/xhtml“，elementType）
如果我不这样做，元素就不会得到一个样式atribute。有两个libs和10K行代码，因此我没有重构，而是将自己的函数分配给document.createElement
，它可以工作，但我使用的另一个扩展由于缺少样式属性而失败。有没有快速的解决办法？如果不是所有人都在另一时间将其作为问题发布。是的，名称空间就是问题所在。我能够编写一个新的DOM，但无法解析任何HTML。您还可以使用.replaceChild（）
而不是.removeChild（）
和（仅供参考），您可以使用var newDoctype=document.implementation.createDocumentType（'html'，''）创建一个新的DOCTYPE
；document.insertBefore（newDoctype，document.childNodes[0]），但这不会有任何好处，因为必须重新加载文档才能处理它。谢谢，我有一个工作的HTMLDocument，尽管现在我必须使用document.createElements（“http://www.w3.org/1999/xhtml“，elementType）
如果我不这样做，元素就不会得到一个样式atribute。有两个libs和10K行代码，因此我没有重构，而是将自己的函数分配给document.createElement
，它可以工作，但我使用的另一个扩展由于缺少样式属性而失败。有没有快速的解决办法？如果不是所有人，请另找时间将其作为问题发布。