JQUERY: Dynamically loading and updating iframe content on change() / keyup()

I've been working on a custom CMS in drupal for about two or three weeks now, and I keep running into this same problem. I'm trying to load a dynamically generated url (by extracting the node id of the target drupal page into $resultCut and appending it to the baseurl of the website). This iframe is embedded next to an instance of CKEditor, and the idea is to have the content in the iframe change when the fields in CKEditor are modified. I have the following Jquery:

<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-开发者_JS百科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);
});

where #EmuFrame is the id of an iframe, and the #edit-* tags are the ids of fields in CKEditor that I am monitoring for change. When the user types, the keyup() or change() events is supposed to grab the new html and swap it with the html in the iframe.

As of right now, the LOADING COMPLETE alert fires, but there is no html in the alert. I noticed that the content of the iframe loads AFTER the alert fires, however, which is what led me to believe that it's a problem with the order in which the events trigger.

Further, I had an alert in the callback function of keyup that returned the new html [ alert(curr) ] that was generated when a user started typing, and this alert returns html (although, it is being grabbed from CKEditor). However, the iframe does not reflect any changes. If I append [ alert (currhead) ] though, nothing is alerted at all.

It might be of interest to note that the source url is technically on a different domain than the parent. however, I used a workaround (i'm pretty sure it works, because I've previously gotten the whole html replacement thing working, and then somehow it broke). Also, neither Firebug nor Chrome's console report any XMLHttpRequest errors. Also, I keep getting this error: "Uncaught Syntax error, unrecognized expression: [@disabled]" and I'm not sure what it means, and whether its relevant to my problem as stated above.

That was a ridiculously long plea for help, so THANKS FOR READING, and thank you for any help!!

Your note about about the cross-domain iframe src is worrisome -- you shouldn't be able to access its contents with javascript. Nevertheless:

You have these two lines in quick succession:

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

Try waiting for the iframe to load first:

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