0

非常に奇妙な問題に遭遇しました！

次のコードを書きました。

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<textarea id="code">
    <div id="hello">Hello world!</div>
    <script type="text/javascript">
    $(function(){
        $("#hello").css({"border":"solid 3px red"});
        alert($("#hello").size());
    });
    </script>
</textarea>

<iframe src="iframe.html"></iframe>

<script type="text/javascript">
    $(function(){
        $("iframe").on("load",function(){
            $(this).contents().find("body").append($("#code").val());
        });
    });
</script>

「iframe.html」ファイルには、jQuery ライブラリへの呼び出しのみが含まれています。

結果は「Hello world!」です。はiframeに表示されますが、赤い枠はありません! $("#hello")うまくいかないようです。実際、alert($("#hello").size())そうすると「0」になります。

何か考えはありますか？ありがとう！

編集：「アラート」を追加します。

4

2 に答える 2

0

html 形式が間違っていると思います。divテキスト領域の内側と任意のテキスト領域の内側に html 要素を配置すると、それらは単純にテキストと見なされ、その html 要素はブラウザでレンダリングされません。したがって、div 要素をテキスト領域の外に置くことができます。

<textarea id="code"></textarea>
<div id="hello">Hello world!</div>

これがうまくいくことを願っています.. :)

于 2013-04-20T17:34:55.817 に答える
0

$(this).contents().find("body").append($("#code").val()); 現在の値のみを取得するため、おそらくそれにリンクされている css 値をコピーしません。 http://api.jquery.com/val/

私が提案するのは、最初に1つのファイルでテストして、それが何をするかを確認することです。今のところiframe部分を削除し、1つのファイルで.size()を確認してください。そうすれば、#hello で .val と .size() がどのように動作するかがわかります。

の下のスクリプトとしてこれを試してください：

<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
alert($("#code").val());
    var scriptx = $("#code").val();
    $(this).contents().find("body")[0].innerHTML = scriptx;
        });
    });
</script>
    });
</script>
于 2013-04-20T17:38:36.090 に答える