0

私は自分のウェブサイトのライブエディターを作成しています。CSS と HTML の部分はダウンしていますが、現在は JS の部分だけが問題です。ここにコードのスニペットがあります

var frame = $('#preview_content'),
           contents = frame.contents(),
           body = contents.find('body');
           csstag = contents.find('head').append('<style></style>').children('style');
           java = contents.find('head').append('<script><\/script>').children('script');//Issues here
       $('.area_content_box').focus(function() {
       var $this = $(this);
       var check = $this.attr('id');
        $this.keyup(function() {

        if (check === "html_process"){
        body.html($this.val());
        } else if(check === "css_process") {
        csstag.text($this.val());
        } else if (check === "java_process"){
        java.text( $this.val() );
        }

        });
      });

問題は、私がこれを試したときに、iframe 本体にも head にもスクリプトタグを挿入していないことです。注入と終了スクリプトタグを含むいくつかの問題について読みました。スクリプトタグを挿入する方法を理解する必要があります。実際には頭に入れたいのですが、体のほうが簡単であれば問題ありません。

jfriend00 - あなたが正直に言うべきだと思うなら、私はこのバニラを作ることに集中します.

では、挿入する JS でエディターを正しく動作させる方法について何かアドバイスはありますか?

4

1 に答える 1

4

これらの2行のコードは、問題が発生する可能性があるように見えます。

csstag = contents.find('head').append('<style></style>').children('style');
java = contents.find('head').append('<script><\/script>').children('script');//Issues here

スタイルタグを作成し、そのDOM要素を覚えておく方がはるかに良いようです。

var iframe = document.getElementById("preview_content");
var iframewindow = iframe.contentWindow || iframe.contentDocument.defaultView;
var doc = iframewindow.document;
var csstag = doc.createElement("style");
var scripttag = doc.createElement("script");
var head = doc.getElementsByTagName("head")[0];
head.appendChild.cssTag;
head.appendChild.scriptTag;

$('.area_content_box').focus(function() {
    var $this = $(this);
    var check = this.id;
    $this.keyup(function() {
        if (check === "html_process") {\
            // I would expect this to work
            doc.body.html($this.val());
        } else if(check === "css_process") {
            // I don't know if you can just replace CSS text like this 
            // or if you have to physically remove the previous style tag
            // and then insert a new one
            csstag.text($this.val());
        } else if (check === "java_process"){
            // this is unlikely to work
            // you probably have to create and insert a new script tag each time
            java.text( $this.val() );
        }
    });
});

これは本文のHTMLで機能するはずであり、スタイルタグへのCSSテキストでも機能する可能性があります。

タグにテキストを割り当ててスクリプトを変更することはできないため、JavaScriptでは機能しないと思います。スクリプトが解析されると、それはjavascript名前空間にあります。

以前に定義および解釈されたスクリプトを削除するために私が知っているパブリックAPIはありません。グローバルシンボルを後続のスクリプトで再定義できますが、前のスクリプトまたはその効果を削除することはできません。

これが私のコードである場合は、以前のスタイルタグを削除し、新しいタグを作成し、DOMに挿入する前にテキストを設定してから、DOMに挿入します。

そのようにしない場合は.text()、すでに挿入されている（および解析されている）スタイルタグに設定するというこの概念が、関連するすべてのブラウザーで機能するかどうかをテストする必要があります。

スクリプトタグについては、新しいスクリプトタグを作成して再挿入する必要があると確信していますが、グローバルシンボルを再定義する以外に、すでに解析されている古いコードを削除する方法はありません。コードを最初からやり直したい場合は、新しいiframeオブジェクトを最初から作成する必要があります。

これには他にも問題があります。.keyup()フォーカスを取得するたびにイベントハンドラーをインストールしている.area_content_boxため、多くのイベントハンドラーがインストールされ、すべてが呼び出されて同じ作業を実行しようとする可能性があります。

于 2013-03-12T05:12:09.913 に答える