1

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() );
        }

しかし、それは機能しませんでした

誰かが私を助けることができますか？

4

1 に答える 1

1

スクリプトタグとコンテンツを同時に挿入する必要があると思います。<script>タグを挿入すると、ブラウザがスクリプトを実行するためです。スクリプトの内容を後で挿入すると、実行されない可能性がありますが、よくわかりません。このようにしてみてください：

$('<script></script>')
      .text($('theinputselectorhere').val())
      .appendTo(contents.find('head'));
于 2012-08-15T06:33:14.823 に答える