textarea
ユーザーが HTML を入力し、それが body 要素に出力されるボックスがありますiframe
。
これは、ほとんどの HTML タグを使用して問題なく機能しますが、<script>
(JavaScript を追加するために) タグを使用すると、script
要素はiframe
.
たとえば、 に次のように入力できるはずですtextarea
。
<script>
function test() {
alert('test');
}
</script>
<button onclick="test()">test</button>
ボタンは に追加されますがiframe
、script
要素は明らかに追加されていないため、ボタンをクリックしても は起動しませんalert()
。
これに対する 1 つの回避alert()
策は、事前にスクリプト化された関数を使用するのではなく、ボタンのクリック時に宣言することです。この回避策を以下に示します。
<button onclick="alert('test')">test</button>
ただし、これは 1 つの JavaScript コマンドのみを許可します (ユーザーは複数のコマンドで関数を使用したい場合があります)。
ここでウェブページを見ることができます
iframe コンテンツを埋める JavaScript は次のとおりです。
(function () {
$('.grid').height($(window).height());
var frame = $('iframe'),
contents = frame.contents(),
body = contents.find('body'),
styleTag = contents.find('head')
.append('<style></style>')
.children('style');
$('textarea').focus(function () {
var $this = $(this);
$this.keyup(function () {
if ($this.attr('id') === 'html') {
body.html($this.val());
} else {
styleTag.text($this.val());
}
});
});
})();