如何正确使用innerHTML

Question

I have a link, that when I click it calls a javascript function with a string argument. This string is actually an a-tag+script-tag, like:

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

which displays a video file.

So anyways, the javascript function is supposed to create that code, and make the video show on the page, but what shows up when I press the link is a string of the code, so its showing as text (but part of it is a hyperlink) and not executing to become the video.

Anyone know why?

Its weird, because if I copy the code (which displays as text), and paste it in the editor like normal, then the video shows...

<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

As I said in the comment I suspect that your attribute is being encoded, so you could try the following:

<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

Why dont you update the innerHtml with the tag you want, and have the javascript run via eval?

I am not entirely sure about the xslt part of it, but the idea would be to break up your two sections (you had said this is really an <a>Anchor</a> and <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

Attribute values are always escaped regardless of output-escaping settings as the other way the content could break the wellformedness the XML file.

Anyway, the core architecture is the problematic on multiple ways. First it moves some trivial client side functionality to the server. Plus this way you encapsulate the main content of the page (video urls) into script code thus hide it from indexers.

I am a big fun of XSLT but the weirdo look and hard readability of the code tells that something is not OK.

A possible solution is the annotation approach: render lists with items holding key information stored as data- attribute on them and let the javascript code (your own or a client side template engine) build the output.