javascript - noscript.innerHTML 跨浏览器有不同的结果

Question

以下代码在 safari、chrome 和 firefox 中具有不同的结果。

var noscript = document.getElementsByTagName('noscript')[0];
console.log(noscript.innerHTML);

Chrome 中的结果:

<img alt="***" title="***" src="***" width="***" height="***" srcset="***" sizes="***"  />

Firefox 中的结果:

<img alt=\"***\" title=\"***\" src=\"***\" width=\"***\" height=\"***\" srcset=\"***\" sizes=\"***\"  />

Safari 中的结果:

<img alt="***" title="***" src="***" sizes="***"  />

如何跨浏览器创建并注入(inject)有效的 img 元素？

以下作品适用于 Chrome 和 Firefox

noscript.insertAdjacentHTML('beforebegin',noscript.innerHTML);

Safari 中的以下作品

var html = new DOMParser().parseFromString(noscript.innerHTML, "text/html");
noscript.insertAdjacentHTML('beforebegin',html.documentElement.innerText);

Answer 1

您可以使用多种客户端检测和兼容性检测技术来检测浏览器，然后针对每种情况执行正确的代码。 https://stackoverflow.com/a/9851769/10905239