如何正确使用innerHTML

Question

我有一个链接，当我单击它时，它会使用字符串参数调用javascript函数。 该字符串实际上是一个a-tag + script-tag，例如：

<a>..</a><script>...</scipt>

显示视频文件。

因此，无论如何，应该使用javascript函数创建该代码，并将视频显示在页面上，但是当我按链接时显示的是代码的字符串，因此它显示为文本（但其中一部分是超链接）并且没有执行成为视频的操作。

有人知道为什么吗？

这很奇怪，因为如果我复制代码（以文本形式显示），然后像平常一样将其粘贴到编辑器中，则视频将显示...

<a title="Click to Show Video" href='javascript:void(0);' onclick="switchFunc('{$thisNode/@*[name()=current()/@Name]}');">
    <div dir="{@Direction}" class="ms-rtestate-field">
      <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes"/>
    </div>
</a>




<script type="text/javascript"> 
  function switchFunc(source) {
    document.getElementById('videoContainer').innerHTML = source;
  }  
</script>

<div id="videoContainer">    </div>

Answer 1

正如我在评论中所说，我怀疑您的属性已被编码，因此您可以尝试以下操作：

<a title="Click to Show Video" href='javascript:void(0);' >
<xsl:attribute name="onclick">switchFunc('<xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes"/>');</xsl:attribute>
    <div dir="{@Direction}" class="ms-rtestate-field">
      <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes"/>
    </div>
</a>

Answer 2

为什么不使用所需的标签更新innerHtml并通过eval运行javascript？

我不确定它的xslt部分，但想法是将您的两部分分开（您曾说过这实际上是<a>Anchor</a>和<script>Javascript</script> ）

html

<a title="Click to Show Video" 
    href='javascript:void(0);' 
    onclick="switchFunc('<a>Anchor</a>','Javascript');">

js

<script type="text/javascript"> 
  function switchFunc(htmlValue, javascriptMethodCall) {
    document.getElementById('videoContainer').innerHTML = htmlValue;
    eval(javascriptMethodCall);
  }  
</script>

Answer 3

不管输出转义设置如何，总是对属性值进行转义，否则内容可能破坏XML文件的格式。

无论如何，核心架构在很多方面都是有问题的。 首先，它将一些琐碎的客户端功能移至服务器。 加上这种方式，您就可以将页面的主要内容（视频URL）封装到脚本代码中，从而对索引器隐藏它。

我对XSLT很有兴趣，但是代码的怪异外观和难以理解的代码告诉我们有些问题。

一种可能的解决方案是注释方法：渲染列表，其中包含项的关键信息作为数据属性存储在其上，然后让javascript代码（您自己的代码或客户端模板引擎）构建输出。