JQUERY: chargement dynamique et mise à jour du contenu iframe sur change()/keyup()

Question

Je travaille sur un CMS personnalisé dans drupal depuis environ deux ou trois semaines maintenant, et je continue de rencontrer le même problème. J'essaye de charger une URL générée dynamiquement (en extrayant l'identifiant de noeud de la page drupal cible dans $ resultCut et en l'ajoutant au baseurl du site). Cette iframe est intégrée à côté d'une instance de CKEditor, et l'idée est d'avoir le contenu dans le iframe change lorsque les champs dans CKEditor sont modifiés. J'ai la Jquery suivante:

<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); 
}); 

où #EmuFrame est l'identifiant d'un iframe, et le # * edit- balises sont les IDs des champs CKEditor que je suis suivi pour le changement. Lorsque l'utilisateur tape, les événements keyup() ou change() sont censés récupérer le nouveau code html et l'échanger avec le code html de l'iframe.

En ce moment, l'alerte LOADING COMPLETE se déclenche, mais il n'y a pas de code HTML dans l'alerte. J'ai remarqué que le contenu de l'iframe se charge après les alertes, ce qui m'a fait croire que c'est un problème avec l'ordre dans lequel les événements se déclenchent. En outre, j'ai eu une alerte dans la fonction de rappel de keyup qui a retourné le nouveau html [alert (curr)] qui a été généré quand un utilisateur a commencé à taper, et cette alerte renvoie html (bien que, il soit saisi par CKEditor). Cependant, l'iframe ne reflète aucun changement. Si j'ajoute [alert (currhead)], rien n'est alerté du tout.

Il peut être intéressant de noter que l'URL source est techniquement sur un domaine différent de celui du parent. Cependant, j'ai utilisé une solution de contournement (je suis assez sûr que cela fonctionne, parce que j'ai déjà tout le travail de remplacement html fonctionnant, et puis en quelque sorte il s'est cassé). De même, ni Firebug ni la console de Chrome ne signalent d'erreurs XMLHttpRequest. En outre, je continue d'obtenir cette erreur: "erreur de syntaxe Uncaught, expression non reconnue: [@disabled]" et je ne suis pas sûr de ce que cela signifie, et si c'est pertinent à mon problème comme indiqué ci-dessus.

Ce fut un long et ridicule appel à l'aide, alors MERCI DE LIRE, et merci pour toute aide !!

Answer 1

Votre note sur le cross-domain iframe src est inquiétant - vous ne devriez pas avoir accès à son contenu avec javascript. Néanmoins:

Vous avez ces deux lignes en succession rapide:

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

Essayez attendant le iframe pour charger la première:

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