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

【问题标题】：Correct way to create a HTML page from an empty SVG document从空的 SVG 文档创建 HTML 页面的正确方法
【发布时间】：2020-05-26 12:10:34
【问题描述】：

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

如果我检测到页面不包含正文元素并且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>

但是当我尝试访问 document.body.style 时，我得到一个空引用错误。 document.body 等于 null 很公平，然后我尝试直接设置 document.body 元素

// leading on from first snippet
document.body = body;  // line 8712

我收到了Uncaught TypeError: Failed to set the 'body' property on 'Document': The provided value is not of type 'HTMLElement'. at contentscript.js:8712

我似乎无法从一个空文档创建一个可用的 HTML 文档。可能吗？

我真的需要这个页面，因为重定向会删除域和关联的会话。

【问题讨论】：

您是否需要彻底清除文档以使用新文档，或者您可以为body 创建新内容？
@ScottMarcus 我需要摆脱 svg 内容。这就是页面以<svg ...blah blah ... /svg> 开头的内容以及它包含的所有内容
@aw04 您是从 svg 文档开始的吗？即地址栏有类似“someDomain.com/someImage.svg”
不，对不起，你是对的。我得到一个 svg 的错误
据我所知，你想要什么是不可能的。

标签： javascript html dom svg google-chrome-extension

【解决方案1】：

见http://alohci.net/static/Blindman67_1.svg 使用

<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>

将元素放在正确的命名空间中。

在 SVG 文档（即非 XHTML、XML 文档）中的 document.createElement() 将在您需要的 HTML 命名空间中的 null 命名空间中创建元素。

【讨论】：

是的，命名空间是问题所在。我能够编写一个新的 DOM，但无法解析任何 HTML。您也可以使用.replaceChild() 而不是.removeChild() 和（仅供参考），您可以使用var newDoctype = document.implementation.createDocumentType('html', '', ''); document.insertBefore(newDoctype, document.childNodes[0]); 创建一个新的DOCTYPE，但这并不会有任何好处，因为必须重新加载文档才能处理它。
谢谢我有一个工作的 HTMLDocument，但现在我必须用document.createElementNS("http://www.w3.org/1999/xhtml",elementType) 创建所有元素，如果我没有元素没有样式属性。有两个库和 10K 行代码，因此我没有将自己的函数分配给 document.createElement，而是重构，但由于缺少样式属性，我正在使用的另一个扩展失败。有没有快速的解决方案？如果不是所有人都将其作为问题再次发布。

【解决方案2】：

这是我使用的：

{
    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.”
}

【讨论】：