0

私の質問をこの質問の複製と呼ぶ前に、私の質問をよく読んでください。

ブログ投稿用の一連のデモページがあります。これらのページには、CSS、HTML、jQuery / JS、またはこれら3つの任意の組み合わせを含めることができます。このページは次のように構成されています。

<div id="page-wrapper">
<style type="text/css">
//CSS here.
</style>

<!--Include jQuery here-->
<script type="text/javascript">
//JS here
</script>

<!--Demo HTML would go here-->
</div>

（ボディのスタイルタグが悪いことは知っていますが、理由があります。）

ページラッパーdivの後に、「ソースの表示」リンク/ボタンを作成するJavaScriptソースファイルを含めます。

この問題は、デモJavaScriptにCSSへの変更が含まれている可能性があるために発生します。これらの変更は、次のようにstyle="color: #ff0000; "、コードが最後にJavaScriptソースファイルによって「取得」されるため、デモHTML（たとえば）に表示されます。

var sourceCode = "<!DOCTYPE HTML>\n<html>" + $('html').html() + "\n</html>";

デモjQueryを最後に実行したい。つまり、ソースファイルのインクルードが実行された後です。私は次のことをすることができません：

  1. <head>jQueryが本文に含まれているため、ソースファイルのインクルード/参照をタグに移動します。これは、ソースコードの閲覧者が私がjQueryを使用していることを認識できるようにするためです。
  2. ソースコードビューアが混乱するため、デモJavaScriptにコードを追加して待機します。
  3. 視聴者が焦ってしまうので、デモJavaScriptを長く待たせてください:)

解決策はありますか？

4

1 に答える 1

1

jsFiddleやjsBinのようなものを作成しているようです。

テンプレートに挿入するJSコードが、関数のコールバックに挿入されるようにすることができます。イベントはonloadあなたが望むことをするべきであるように聞こえます。

<div id="page-wrapper">
    <style>
        <!-- ### demo CSS -->
    </style>
    <script>
        (function ($) {
            $(window).load(function () {
                <!-- ### demo JS -->
            });
        })(jQuery);
    </script>
    <!-- ### demo HTML -->
</div>

実装によっては、それが機能しない場合があるonloadため、カットされない場合は、代わりにカスタムイベントコールバックをトリガーしてみてください。

<script>
    (function ($) {
        $(window).on('my.custom.event', function () {
            <!-- ### demo JS -->
        });
    })(jQuery);
</script>
<!-- ### demo HTML -->
<script>
    jQuery(window).trigger('my.custom.event');
</script>
于 2012-11-07T21:13:49.800 に答える