PHP + Smarty + Mysql + Javascriptでサイトを作っています。
<div id="myText1">
</div>
<a href="javascript:void(0)" onClick="change('myText1','<script src="http://static.fc2.com/video/js/outerplayer.min.js" url="http://video.fc2.com/a/content/20140901yh9ye1xU/" tl="タイトル" sj="73000"></script>')">リンク</a>
上記のように下のリンクをクリックすると上の
<div id="myText1"> </div>
の中にリンクタグ内にあるscriptの部分を表示します。(FC2動画貼り付けタグ)
*head内のscript部分は省いています。
ただ上記のまま実行しようとしても動作しません。
scriptの部分を消してテキストのみにすると動作します。
おそらくエスケープ処理していないからではと思いいろいろやってはみましたがだめでした。
このクリックでscript内のscriptを動作させるののはどうすればよいのでしょうか?
change 関数の中身が分からないので、試してませんが、以下のように書き換えるとどうなりますか。
onClick="change('myText1','<scr' + 'ipt src="http://static.fc2.com/video/js/outerplayer.min.js" url="http://video.fc2.com/a/content/20140901yh9ye1xU/" tl="タイトル" sj="73000"></scr' + 'ipt>')"
見切れちゃうので改行を入れてますが、一行にして大丈夫です。
'<script>' → '<scr' + 'ipt>' '</script>' → '</scr' + 'ipt>'
と、してるということです。いや、違うな。こうかな。
onClick="change('myText1','<script src=\"http://static.fc2.com/video/js/outerplayer.min.js\" url=\"http://video.fc2.com/a/content/20140901yh9ye1xU/\" tl=\"タイトル\" sj=\"73000\"></script>')"
onclick の内側にあるダブルクォートを、バックスラッシュでエスケープ。こっちのような気がします。見切れてますけど、script の src 属性を閉じるダブルクォートもエスケープです。
onClick="change('myText1','<script src=\'http://static.fc2.com/video/js/outerplayer.min.js\' url=\'http://video.fc2.com/a/content/20140901yh9ye1xU/\' tl=\'タイトル\' sj=\'73000\'\></script>')">リンク</a>
script タグの中にある属性をくくってるダブルクォートを、シングルクォートに変えて、バックスラッシュでエスケープです。
ちなみに、change にタグを渡すと、テキストになって見えるんでしょうね?
change の実装は、こんなのを想定してます。innerHTML ではなく、textContent という。
<script> function change(id, t) { var e = document.getElementById(id); e.textContent = t; } </script>
追記です。
2015/01/17 10:20:17textContent ではそのままテキストが表示されるので動画は表示されませんでした。
html をそのまま表示するのではなく、スクリプトを動かしたいんですね。
関数 change を、以下のようにしてみてください。
all は、古いIE でしか正しく動作しません。
2015/01/17 16:28:21