2012-03-08 15 views
4

私のページにjwysiwygコンテンツエディターコントロールがあります。コントロールは、内部に完全なHTMLページコードを持つiframeに自身を作成することによって動作します。iframe内のbodyタグのJquery検出の変更またはキーアップ

changeまたはkeyupが存在するかどうかを検出したいので、「レコードを保存する必要があることを示す」コードを使用できます。入力ボックスがあり、この作業はうまくいきます。このサードパーティのエディタコントロールだけで問題が生じています。ここで

は、ページのソースは次のようになります。

<div id="this_is_our_div_Container"> 
    <div class="wysiwyg"> 
     <iframe id="f_Body-wysiwyg-iframe"> 
      <html> 
      <body style="margin: 0;" class="wysiwyg"> 
       I just typed this now!</body></html> 
     </iframe> 
    </div> 
    <textarea class="wysiwyg" cols="20" id="f_Body" name="f_Body" rows="2" 
     style="display: none;"></textarea> 
</div> 

は、bodyタグはリアルタイムに変化が含まれていることを参照してください。これらのSOの質問...

jQuery 'if .change() or .keyup()'

https://stackoverflow.com/a/1639342/511438

私はdocument.Readyに次のように試してみました:

$('iframe').contents().find('body.wysiwyg').live('change', function (e) 
{ 
    alert('testing'); 
}); 
$('iframe').contents().find('body.wysiwyg').live('keyup', function (e) 
{ 
    alert('testing'); 
}); 
$('iframe > *').bind('keyup', function (e) 
{ 
    alert('testing'); 
}); 

うまくいけば、このPrintScreenを助けます。 LARGER enter image description here

+0

あなたの質問は何ですか? –

+0

あなたは深刻ですか?さて、キーストロークを検出するためにbodyタグにイベントを付加するにはどうすればいいですか? –

答えて

6

正しいトラックに沿っているようです。

私はこれがあなたのために働くかどうかは疑問に思う:

$('elementSelector', $('iframeSelector').contents()).on('keyup', function(e) { 
    alert('testing'); 
}); 

だからあなたの場合には、私が思う:

$('body.wysiwyg', $('iframe#f_Body-wysiwyg-iframe').contents()).on('keyup', function(e) { 
     alert('testing'); 
}); 

この回答にコードを使用すると、version 1.7 or higher of jQueryを使用することによるが。

古いバージョンのjQueryを使用している場合は、liveを使用することができます。バージョン1.7以降、またはおそらくはデリゲートとして廃止されました。私はあまりよく分からない。 .on()と.off()でjQueryの最新バージョンを使用するのが最善の方法です。

+0

よろしく!乾杯!また、ライブについてのヒントについては感謝しています。 LOL、私はそれを先日採用しました。今私はそのコードを更新する予定です。 –

+0

@Houdmontこれはうまくいくようですが、IE7、IE8、IE9では動作しません。このアップデートはありますか? –

1

私はあなたのiframeの内側の内容を編集するためのアクセス権を持っているかどうかわからないが、私は同様の問題を持っていた、これは私の仕事:内

$(document).ready(function(){ 
    $("body").live('keyup', function(){ 
     window.top.window.iChanged(); 
    }) 
}); 

:iframeの本体内部

親htmlページの内容:

function iChanged(){ 
    alert("I changed"); 
} 
関連する問題