如何在 HTML iframe 文档中插入特殊字符？答案

【问题标题】：How do I insert special characters to an HTML iframe document?如何在 HTML iframe 文档中插入特殊字符？
【发布时间】：2022-02-02 02:21:23
【问题描述】：

我正在尝试将 JavaScript 添加到 HTML 沙盒 iframe。 JavaScript 代码包含一个奇怪的字符。当代码在 iframe 之外运行时，它可以完美运行。但不幸的是，Stack Overflow 无法显示此字符。

<!DOCTYPE html>
    <body>
        <script>
            console.log("Special character: ''")
        </script>
    </body>
</html>

现在我想使用 srcdoc 将此代码插入到沙盒 iframe 中。

<!DOCTYPE html>
    <body>
        <iframe sandbox = "allow-scripts" srcdoc = "<!DOCTYPE html><body><script>console.log(Special character: '')</script></body></html>"></iframe>
    </body>
</html>

当我在 Firefox 网络浏览器中运行上面的代码时，它有时会在控制台中显示字符。在其他时候，它会引发错误：Uncaught SyntaxError: invalid range in character class。这很奇怪的主要原因是因为每次结果都不一样。这让我想知道这是否是一个 Firefox 错误。请说明原因。

在这方面花了很多时间后，我决定采取另一种方法。

<!DOCTYPE html>
    <body>
        <iframe id = frame sandbox = "allow-scripts allow-same-origin"></iframe>

        <script>
            const content = frame.contentWindow || frame.contentDocument
            content.document.open()
            content.document.write("<!DOCTYPE html><body><script>console.log(Special character: '')<\/script></body></html>")
            content.document.close()
        </script>
    </body>
</html>

这一次，我得到一个不同的错误：missing ) after argument list。我知道没有括号丢失。导致问题的原因是特殊字符。

最后，我尝试了其他方法。

<!DOCTYPE html>
    <body>
        <iframe id = frame sandbox = "allow-scripts allow-same-origin"></iframe>

        <script>
            const content = frame.contentWindow || frame.contentDocument
            content.document.open()
            content.document.write("<!DOCTYPE html><body></body></html>")
            content.document.close()

            content.eval("console.log(Special character: '')")
        </script>
    </body>
</html>

上面的代码有时有效，有时无效。这非常令人沮丧。上面代码的另一个问题是我必须在 iframe 沙箱中包含 allow-same-origin，我希望 iframe 尽可能安全，我真的不想给 iframe 太多控制权。

这只是一个 Firefox 错误吗？就算不能在控制台显示这个字符，如何保证不出错？

编辑： Stack Overflow 不断从我的帖子中删除该角色。这里是 fiddle。

【问题讨论】：

为澄清起见，我已经在一些特殊字符上尝试过这个测试。它们似乎没有任何单独的意义。
需要了解为什么您的“特殊字符”没有在 SO 中显示。 SO 完全符合 Unicode。您可以将其粘贴在这里或您的问题中吗？
对不起，我不能。请查看fiddle。
来自您的 JSFiddle，它是 0x1C，在 UTF-8 中是 INFORMATION SEPARATOR FOUR：cogsci.ed.ac.uk/~richard/utf-8.cgi?input=0x1c&mode=bytes - 您可以在 HTML 中将其实体化为 &#x0001C;
U+001C 是一个控制字符。控制字符通常没有可见的字形。那你怎么知道它应该是什么样子？您如何确定在 IFRAME 之外显示的内容是正确的版本？事实上，U+001C 将 Unicode 属性 Whitespace 设置为 true，因此任何看起来不像空格的渲染很可能是不正确的。也许如果您在字符串中解释为什么需要此字符，我们可以更好地理解您的问题并帮助找到解决方案。

标签： javascript html iframe sandbox

【解决方案1】：

感谢您提供帮助的 cmets。这不是 Firefox 错误。在处理特殊字符时，不能将它们粘贴为纯 HTML。另外，我犯了一个大错误。我正在编写以下代码。

<!DOCTYPE html>
    <body>
        <iframe access = "allow-scripts" srcdoc = "<!DOCTYPE html><body><script>console.log(Special character: '')</script></body></html>"></iframe>
    </body>
</html>

如果您仔细观察，您会发现我在 console.log 函数中缺少引号。这导致了 JavaScript 错误。 JavaScript charCodeAt() 函数对于获取字符代码很有用，@Old Geezer 帮助我理解了这一点。

得到字符代码后，就可以编写 HTML 代码了。

<!DOCTYPE html>
    <body>
        <iframe access = "allow-scripts" srcdoc = "<!DOCTYPE html><body><script>console.log(&#34;Special character: '&#28;'&#34;)</script></body></html>"></iframe>
    </body>
</html>

上面的代码运行没有任何错误。字符在不同浏览器上的显示方式不同这一事实不是问题，因为该特定字符没有可见的字形。

【讨论】：

这行得通吗：... srcDoc="...<script>console.log('\x28')</script> ... " ?
对不起，我的意思是'\x1c'。
是的，这行得通。在 JavaScript 字符串中编写字符代码比编写 html 代码更简洁。