javascript内のscript記載の動作について質問です。

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を動作させるののはどうすればよいのでしょうか?

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/01/16 19:05:05
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:a-kuma3 No.1

回答回数4972ベストアンサー獲得回数2154

ポイント300pt

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>
他1件のコメントを見る
id:numb08

追記です。
textContent ではそのままテキストが表示されるので動画は表示されませんでした。

2015/01/17 10:20:17
id:a-kuma3

html をそのまま表示するのではなく、スクリプトを動かしたいんですね。
関数 change を、以下のようにしてみてください。

<script>
function change(tID,str){
    document.getElementById(tID).innerHTML = str;
}
</script>

all は、古いIE でしか正しく動作しません。

2015/01/17 16:28:21

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません