简体   繁体   English

如何在 HTML iframe 文档中插入特殊字符?

[英]How do I insert special characters to an HTML iframe document?

I am trying to add JavaScript to an HTML sandbox iframe.我正在尝试将 JavaScript 添加到 HTML 沙箱 iframe。 The JavaScript code contains a strange character. JavaScript 代码包含一个奇怪的字符。 When the code is run outside of an iframe, it works perfectly.当代码在 iframe 之外运行时,它可以完美运行。 Unfortunately, though, Stack Overflow cannot display this character.不幸的是,Stack Overflow 无法显示此字符。

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

Now I want to insert this code into a sandbox iframe using srcdoc.现在我想使用 srcdoc 将此代码插入到沙箱 iframe 中。

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

When I run the code above in the Firefox web browser, it sometimes displays the character in the console.当我在 Firefox 网络浏览器中运行上面的代码时,它有时会在控制台中显示字符。 At other times, it raises an error: Uncaught SyntaxError: invalid range in character class .在其他时候,它会引发错误: Uncaught SyntaxError: invalid range in character class The main reason why this is odd is because the result is different each time.这很奇怪的主要原因是因为每次结果都不同。 This made me wonder if it was a Firefox bug.这让我怀疑这是不是 Firefox 的错误。 Please explain the reason for this.请解释原因。

After spending a lot of time on this, I decided to take another approach.在花了很多时间之后,我决定采取另一种方法。

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

This time, I get a different error: missing ) after argument list .这一次,我missing ) after argument list得到一个不同的错误: missing ) after argument list I know that no brackets are missing.我知道没有缺少括号。 The thing causing the problem is the special character.导致问题的原因是特殊字符。

Finally, I tried something else.最后,我尝试了别的东西。

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

The code above sometimes works and sometimes doesn't.上面的代码有时有效,有时无效。 This is very frustrating.这是非常令人沮丧的。 Another problem with the code above is that I have to include allow-same-origin in the iframe sandbox, I want the iframe to be as secure as possible and I don't really want to give the iframe too much control.上面代码的另一个问题是我必须在 iframe 沙箱中包含allow-same-origin ,我希望 iframe 尽可能安全,我真的不想给 iframe 太多控制权。

Is this just a Firefox bug?这只是 Firefox 的错误吗? Even if I can't display this character in the console, how can I ensure that no errors occur?即使我无法在控制台中显示此字符,如何确保不发生错误?

Edit: Stack Overflow keeps removing the character from my post.编辑: Stack Overflow 不断从我的帖子中删除该角色。 Here is a fiddle instead.这是一个小提琴

Thank you for the helpful comments.感谢您的有益评论。 This is not a Firefox bug.这不是 Firefox 的错误。 When you are dealing with special characters, you can't just paste them as plain HTML.当您处理特殊字符时,您不能只是将它们粘贴为纯 HTML。

Also, I was making a big mistake.另外,我犯了一个大错误。 I was writing the following code.我正在编写以下代码。

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

If you look closely, you will see that I was missing the quotes in the console.log function.如果仔细观察,您会发现我遗漏了console.log函数中的引号。 This caused a JavaScript error.这导致了 JavaScript 错误。

The JavaScript charCodeAt() function is useful for getting the character code, Old Geezer helped me to understand this. JavaScript charCodeAt()函数对于获取字符代码很有用, Old Geezer帮助我理解了这一点。

After you have the character code, you can then write the HTML code.有了字符代码后,就可以编写 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>

The code above runs without any errors.上面的代码运行没有任何错误。 The fact that the character is displayed differently on different browsers is not a problem because this specific character doesn't have a visible glyph.字符在不同浏览器上的显示不同这一事实不是问题,因为该特定字符没有可见的字形。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM