如何正确使用innerHTML

How to properly use innerHTML

本文关键字：innerHTML 何正确      更新时间：2023-09-26

我有一个链接，当我点击它时，它会调用一个带有字符串参数的javascript函数。这个字符串实际上是一个a-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>

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

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

为什么不使用所需的标记更新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>

无论输出转义设置如何，属性值都会被转义，因为其他方式的内容可能会破坏XML文件的良好格式。

无论如何，核心体系结构在多个方面都存在问题。首先，它将一些琐碎的客户端功能转移到服务器上。另外，通过这种方式，您可以将页面的主要内容（视频URL）封装到脚本代码中，从而对索引器隐藏它。

我非常喜欢XSLT，但奇怪的外观和代码的可读性告诉有些地方不好

一个可能的解决方案是注释方法：呈现列表，其中包含存储为data-attribute的关键信息，并让javascript代码（您自己的或客户端模板引擎）构建输出。

相关文章：