amp-script中innerHTML原样渲染转义序列问题求解决方案

Ah, I've run into this exact quirk with amp-script before! The issue here is that AMP's sandboxed execution environment for amp-script alters the standard behavior of innerHTML: instead of parsing HTML entities like < and & into their actual characters (< and &), it escapes them again, resulting in the raw entity strings being rendered.

Here are two reliable fixes you can use: #

1. Use DOMParser to parse the entity string into a DOM node

This method explicitly parses your HTML entity string into proper DOM content before inserting it into the target element:

const parser = new DOMParser();
// Parse the entity string as HTML
const parsedDoc = parser.parseFromString('<&', 'text/html');
// Append the parsed content to your target span
document.getElementById("a").appendChild(parsedDoc.body.firstChild);

2. Use a temporary element to parse entities first

You can also create an off-screen temporary element, let it parse the entities via innerHTML, then move its content to your target element:

const tempContainer = document.createElement('div');
// Let the temp element parse the entities
tempContainer.innerHTML = "<&";
// Move the parsed text node to your target span
document.getElementById("a").appendChild(tempContainer.firstChild);

Modified Full Example Code #

Here's your original example updated with the first fix:

<!doctype html>
<html data-ampdevmode ⚡>
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
</head>
<body data-ampdevmode>
    <amp-script layout="fixed-height" height="800px" script="hello-world">
        <span id="a"></span>
    </amp-script>
    <script id="hello-world" type="text/plain" target="amp-script">
        const parser = new DOMParser();
        const parsedDoc = parser.parseFromString('&lt;&amp;', 'text/html');
        document.getElementById("a").appendChild(parsedDoc.body.firstChild);
    </script>
</body>
</html>

Both approaches work because they bypass the AMP sandbox's extra escaping layer by letting the browser's native HTML parser handle the entities first, then inserting the already-parsed content into the DOM.

内容的提问来源于stack exchange，提问作者user3612643