Как правильно использовать 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

Значения атрибутов всегда экранируются независимо от настроек экранирования выходных данных, так как в противном случае содержимое может нарушить правильность XML-файла.

В любом случае, базовая архитектура является проблемной по нескольким направлениям. Сначала он переносит на сервер некоторые тривиальные функции на стороне клиента. Кроме того, таким образом вы инкапсулируете основное содержимое страницы (URL-адреса видео) в код скрипта, тем самым скрывая его от индексаторов.

Мне очень нравится XSLT, но странный внешний вид и сложная читаемость кода говорят о том, что что-то не так.

Возможным решением является подход аннотации: визуализировать списки с элементами, содержащими ключевую информацию, хранящуюся в них как атрибут данных, и позволить коду javascript (вашему собственному или клиентскому шаблонному движку) создавать выходные данные.

Answer 3

Почему вы не обновляете innerHtml нужным тегом и не запускаете javascript через eval?

Я не совсем уверен в части xslt, но идея состоит в том, чтобы разбить ваши две секции (вы сказали, что это действительно <a>Anchor</a> и <script>Javascript</script>)

HTML

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

1010 * JS *

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