Tinkerbinのようなコードプレイグラウンドを作ろうとしていました。
基本的に、CSS / HTML / JavascriptコードをさまざまなTextareaから取り出し、Iframeに挿入します。また、Iframeを即座に更新する必要があります。
ただし、Javascriptの挿入に少しこだわっています。
ほら、私がこれまでにしたこと:
(function() {
$('.grid').height( $(window).height() );
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
$('textarea').keyup(function() {
var $this = $(this);
if ( $this.attr('id') === 'html') {
body.html( $this.val() );
}
if ( $this.attr('id') === 'css') {
styleTag.text( $this.val() );
}
});
})();
これはCSSとHTMLを注入しますが、Javascriptは注入しません。
追加してみました
scriptTag = $('<script></script>').appendTo(contents.find('head'));
と
if ( $this.attr('id') === 'javascript') {
scriptTag.text( $this.val() );
}
しかし、それは機能しませんでした
誰かが私を助けることができますか?