30

我正在与一些看似简单的事情发生争执。我有一个 [javascript] 字符串，其中包含 DOM 元素，并且想打开一个新窗口（window.open()？）并使用该字符串填充新窗口。即让浏览器获取字符串并即时将其转换为 HTML。这可能吗？

4

5 回答 5

72

是的，有可能...

var wnd = window.open("about:blank", "", "_blank");
wnd.document.write(html);

这应该够了吧。

于 2013-07-05T16:10:46.230 回答
7

HTML

Archer 的回答很好，但如果你愿意，你可以在一个班轮中做到这一点：

window.open("data:text/html;charset=utf-8,"+html, "", "_blank")

打开 XML？

window.open("data:text/xml;charset=utf-8,"+xml, "", "_blank")

使用 XML，请确保您的字符串以根元素开头<?xml version="1.0" encoding="UTF-8"?>并具有根元素。如果没有，您可以轻松添加它：

window.open('data:text/xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8"?><RootTag>'+xml+'</RootTag>', "", "_blank")
于 2016-01-19T19:33:14.553 回答
5

Archer的回答是最好的方法。但是您需要关闭文档才能运行“htmlString”中的脚本。

 var wnd = window.open("about:blank", "");
        wnd.document.write(htmlString);
        wnd.document.close();
于 2016-06-27T06:16:31.520 回答
4

如果你需要在新标签中，你可以使用它。

const win = window.open('about:blank', '_blank');
win.document.write('<h1>test</h1>');
win.focus();
于 2019-11-14T16:03:39.567 回答
2

请注意，虽然window.open在 2013 年是一个很好的解决方案，但此时已不再是这种情况，也不再window.open是正确的答案；由于多年的广告滥用，几乎所有浏览器都默认阻止它，并且被认为是一种在工作时完全绕过浏览器历史记录的遗留机制。

相反，构建一个链接锚元素，将其内容分配为 data-uri，给它 atarget="_blank"以便它在新选项卡中打开，然后click()在其上触发 a 以便它将该内容作为具有正常网页的普通网页打开浏览器历史记录中的条目：

function openAsPageInNewTab(pageContent) {
  let encoded = encodeURIComponent(pageContent); 
  let a = document.createElement(`a`);
  a.target = `_blank`;
  a.href = `data:text/html;charset=utf-8,${encoded}`;
  a.style.display = `none`;
  document.body.appendChild(a); // We need to do this,
  a.click();                    // so that we can do this,
  document.body.removeChild(a); // after which we do this.
}

当然，您可能仍然会收到弹出警告，因为它应该，但至少您现在以尊重用户和浏览器的方式做事，这与传统window.open方法不同。

于 2019-03-19T20:57:22.847 回答