高级递归引用嵌入HTML和Javascript

我有一个程序，可以让我显示相同的代码在多种编程语言中的样子。我将其编译为HTML网页，它使用按钮onclick处理程序将代码切换到用户想要看到的任何语言。由于复杂的嵌入问题，它失败了。我认为我正确地转义了嵌入的字符，但似乎它们正在被解释，这导致了引号嵌入问题。

这是一个按钮无法工作的例子。

<button onclick="code_box('Example_1','<?phpn# Main Program Bodyn echo 'Hello, World!', "n";nn?>n')">PHP</button>

我所有的其他按钮都在工作，在大多数情况下，这个过程很顺利。所以我知道这不是由code_box函数或周围html代码中的错误引起的。我认为(这只是猜测)转义字符正在被Firefox解释，因为它们包含对HTML有意义的字符，这导致了引号嵌入问题。如果是这样的话，我就不知道该如何解决这个问题了。

作为参考，这里是上面按钮嵌入的PHP代码。

<?php
# Main Program Body
echo 'Hello, World!', "n";
?>

为了提供更大的上下文，这里有一个完整的示例，其中其他按钮可以工作，但这个按钮不起作用。其他的都可以工作，我不能继续添加语言，直到我弄清楚这个问题。

当我点击PHP按钮时，什么也没发生。当我点击任何其他按钮时，它们都按预期工作。我试过从按钮代码中删除所有转义的HTML实体，它工作，但当然代码缺少所有这些字符。

这是在一个漫长的调试序列的末尾，我使它越来越健壮，直到它看起来万无一失，但它仍然不能工作。

提前感谢您的帮助!

function code_box(Name, Text)
{
var Element = document.getElementById(Name);
Element.innerHTML = Text;
}
</script></head><body>
<div>
<button onclick="code_box('Example_1','module Hellon{n    mainn    {n        write &#34;Hello, World!&#34; line;n    }n}')">goalspell</button>
<button onclick="code_box('Example_1','if __name__ == &#34;__main__&#34;:n    print(&#34;Hello, World!&#34;)nn')">Python</button>
<button onclick="code_box('Example_1','/* Main Program Body */nlet [_node, _code, ] = process.argv;nconsole.log(&#34;Hello, World!&#34;);')">Javascript</button>
<button onclick="code_box('Example_1','&#60;&#63;phpn# Main Program Bodyn    echo &#39;Hello, World!&#39;, &#34;n&#34;;nn&#63;&#62;n')">PHP</button>
<button onclick="code_box('Example_1','HellonHello ; Hello module.nMAIN() ; main programn W &#34;Hello, World!&#34;,!n Qnnn')">MUMPS</button>
<div class="codebox" id="Example_1">module Hello
{
main
{
write "Hello, World!" line;
}
}</div></div>```

不要试图手写所有转义。使用为您正在使用的语言设计的转义数据的函数来执行此操作。

<?php
$string = "The string
you want to show
which can have just about
any literal characters in it
although you need to take care
of $ and " as they are 
special in PHP!";
# You can generate JS source code using json_encode since JSON is
# more-or-less a subset of JS.
$javascript_literal = json_encode($string);
# Then write your JavaScript expression and convert it to HTML
$javascript_expression = "code_box('Example_1', $javascript_literal);"
$html_attribute_value = htmlspecialchars($javascript_expression);
?>
<button onclick="<?php echo $html_attribute_value ?>">Value</button>

有时候你太担心一些超级高级的东西，而忽略了一些显而易见的东西!

在这种情况下，我使用一个代码生成器，在那里我花了很大的时间来确保我得到正确的HTML和Javascript字符嵌入。我看到代码不能工作，即使我确信嵌入的字符是正确的。我尝试了至少十种不同的(可能是正确的)方法来解决这个问题。

没什么帮助。

我很想责怪浏览器。然后，当我第100次回到调试器时，我挠头了，我注意到我做错了什么。

function code_box(Name, Text)
{
var Element = document.getElementById(Name);
Element.innerHTML = Text;
}

这段代码，在我原来的帖子中是普通的，是设置innerHTML而不是innerText。这意味着代码需要额外的时间重新转义才能正常工作。我没有那样做，而是做了如下修改:

更正后的代码如下:

function code_box(Name, Text)
{
var Element = document.getElementById(Name);
Element.innerText = Text;
}

解决了整个问题。

真是松了一口气!!

相关内容

最新更新

热门标签：