JREERY：change（）/ keyup（）のiframeコンテンツを動的にロードして更新する

Question

私はdrupalのカスタムCMSを約2週間または3週間働いています。私は、動的に生成されたURLをロードしようとしています（ターゲットのDrupalページのノードIDを$ resultCutに抽出し、それをウェブサイトのbaseurlに追加することによって）。このiframeはCKEditorのインスタンスの隣に埋め込まれており、CKEditorのフィールドが変更されたときにiframe内のコンテンツを変更することが考えられます。タグ#EmuFrameは、IFRAMEのID、および＃の編集 - である

<script type="text/javascript">  
$(document).ready(function(){   
    baseurl = urlhere; 
    url = baseurl+"<?php echo $resultCut ?>" 
    $('#EmuFrame').attr('src', url); 
    var HTML = $('#EmuFrame').contents().find('body').html(); 
    alert ("LOADING COMPLETE" + HTML); 
}); 
$('#edit-field-mobile-page-header-label-0-value').change(function() { // writes changes to the header text to emulaor 
    var curr = $(this).val(); 
    $('#EmuFrame').contents().find("h1").text(curr); 
}); 
$('#edit-body').keyup(function(e) { // writes changes to the body text to emulator 
    var curr = $(this).val(); 
currhead = $('#EmuFrame').contents().find("h1").html(); 
$('#EmuFrame').contents().find('#content').html("<h1>"+currhead+"</h1>"+curr); 
}); 

*私は変更を監視していますCKEditorバージョンのフィールドのIDです：私は、次のjQueryを持っています。ユーザーがタイプすると、keyup（）イベントまたはchange（）イベントは新しいhtmlを取得し、iframeのhtmlでそれをスワップすることになっています。

今のところ、LOADING COMPLETEアラートは起動しますが、アラートにはHTMLはありません。しかし、アラートが発生した後にiframeの内容が読み込まれていることに気がつきました。これは、イベントが発生する順序に問題があると私に信じさせました。

さらに、ユーザが入力を開始したときに生成された新しいhtml [alert（curr）]を返すkeyupのコールバック関数に警告があり、この警告はhtmlを返します（ただし、CKEditor ）。ただし、iframeには変更が反映されません。しかし、[alert（currhead）]を追加すると、何も通知されません。

ソースURLは技術的には親とは異なるドメインにあることに注意してください。しかし、私は回避策を使用しました（私は以前、HTMLの置き換えの全部の作業を行っていたので、何とかそれが壊れてしまったので、動作していると確信しています）。また、FirebugもChromeのコンソールもXMLHttpRequestエラーを報告しません。また、私はこのエラーが発生し続ける： "未知の構文エラー、認識されない式：[@disabled]"と私はそれが何を意味するか、そして上記の私の問題に関連するかどうかはわかりません。

これは、助けを大変申し訳なく思っていたので、読んでいただきありがとうございました。何かありがとうございました！

Answer 1

クロスドメインiframe srcについて気になる点はありますか？JavaScriptのコンテンツにはアクセスできないはずです。それにもかかわらず：

あなたは立て続けに次の2行を持っている：

$('#EmuFrame').attr('src', url); 
var HTML = $('#EmuFrame').contents().find('body').html(); 

最初にロードするためのiframeを待ってみてください。迅速な対応のための

$('#EmuFrame').load(function() { 
    var HTML = $('#EmuFrame').contents().find('body').html(); 
}