Je définit le code HTML de l'élément de corps dans une iframe à une chaîne STR, puis je souhaite accéder à ce contenu sur la ligne suivante (ici simplement à l'aide d'un appel d'alerte pour afficher le contenu) mais les fonctions HTML et ANNEZ Je n'ai pas terminé au moment où l'instruction d'alerte est appelée.
$(function(){
....
$("#notes-tab span.add_draft").bind("click", function(e){
var str = '';
$(this).parent().siblings(".tab-content").children(".para").each(function(ind) {
str += $(this).find('div:first').html();
});
var curr = $("#content_rte").contents().find("body").html();
if (curr == ' ' || curr == '<br>') {
$("#content_rte").contents().find("body").html(str);
}
else {
$("#content_rte").contents().find("body").append(str);
}
alert($("#content_rte").contents().find("body").html());
});
});
8 Réponses :
Vous devriez essayer $ (fenêtre) .charger (fonction (Fonction ()) plutôt que de documents.Ready vous pouvez toujours déclencher l'événement après votre appouens. De cette façon, les événements ne seront exécutés qu'une fois que l'annexe a été traitée avec succès.
La fenêtre.Load ne fonctionne que lorsque le DOM a été chargé, puis tout le contenu de la DOM.
Si cela ne fonctionne pas pour vous, vous pouvez toujours avoir un fichier () exécuter sur le document.Ready ou Window.Load et mettez vos fonctions / événements là-bas et il sera chargé après une quantité spécifique de secondes.
Vous pouvez essayer:
Il n'y a vraiment pas de méthode directe pour attendre autre que de définir un délai d'attente arbitraire avant de tenter de récupérer le HTML. Le code pour le faire serait:
// wait for 250 ms, then try and retrieve contents
setTimeout(function() {
alert($("#content_rte").contents().find("body").html());
}, 250);
Mauvaise réponse, vous ne saurez jamais quelle valeur pour choisir ici. Cela fonctionnera pour 99% de vos clients et échouera pour ces 1% qui apportent en réalité la plupart des espèces ...
Oui, une réponse terrible, malgré cela peut fonctionner dans la plupart des cas. Qu'en est-il des conditions de race? ( en.wikipedia.org/wiki/race_condition )
Êtes-vous sûr que les valeurs que vous attendez sont copiées dans les emplacements que vous attendez? html et append appelez dOMManip , qui est une méthode synchrone, donc alerte ne devrait pas même pas Exécuter jusqu'à ce que ces appels soient terminés.
D'accord. @CRAIG, l'annexe se déroule-t-elle avec succès? En outre, ANNEZ () renvoie jQuery. Vous pouvez obtenir le contenu HTML sans rechercher une 2e fois.
Oui, à la fois des travaux d'écriture de l'annexe et du code HTML avec succès, une fois que l'alerte indique un vide. Je n'ai pas réalisé qu'Append n'a rien retourné.
@CRAIG, êtes-vous capable de poster un lien public sur votre page ou une version de la page qui reproduit le problème?
@Jeff - La manipulation de l'iframe est délicate, j'ai déjà connu le même problème. Cela vaut probablement une question complètement distincte pour résoudre exactement pourquoi la récupération échoue (pertinente pour les iframes et la bibliothèque de jQuery elle-même).
@cballou - maintenant je suis curieux! Je vois qu'il y a eu d'autres questions liées à jQuery et à des iframes (comme Stackoverflow.com/Questtions/205087/... ). Maintenant pour trouver un peu de temps ...
J'ai le même problème - il est donc dit que la commande peut être exécutée avant que "append" appel a terminé.
Vous devez attendre l'événement DOM Load afin que l'IFrame ait le temps de terminer le chargement:
$(document).ready(function(){
var str = '<div>HelloWorld</div>';
var curr = $("#content_rte").contents().find("body").html();
if (curr == ' ' || curr == '<br>') {
//$("#content_rte").contents().find("body").html(str);
$("#content_rte").contents().find("body").append(str);
}
else {
$("#content_rte").contents().find("body").append(str);
}
alert($("#content_rte").contents().find("body").html());
});
Vous devrez peut-être écouter pour l'événement Iframe Ready ("#Content_rte"). Contenu (). Prêt (Fonction () {...});
il ne serait pas prêt, il serait prêt que le chargement définit le rendu complet de la charge des éléments DOM est à la fois des éléments DOM et du contenu ce dont ils ont besoin
Vous devez utiliser Pour ce faire, vous pouvez mettre votre script dans le HTML P> $ (document) .Ready (fonction (fonction (fonction () {}) code> ou $ (fonction () {}) code> mais avec cet élément de document de l'iframe. $( 'body' ).append( '<iframe id="cool"></iframe>' )
var theFrame = $( '#cool' )[ 0 ];
var docEl = theFrame.contentDocument || theFrame.contentWindow || theFrame.document;
$( docEl ).ready( function( ){ /* ready stuff */ } );
Si vous utilisez jQuery, vous pouvez compter sur .cousest () code> pour comprendre si L'élément que vous venez de créer a une balise code> parent code>, et si cela signifie que cela a été ajouté à la DOM. Vous pouvez écrire une fonction telle que celles qui vous permettent de faire quelque chose lorsque votre élément est prêt:
callWhenReady: function (selector, callback, scope) {
var self = this;
if ($(selector).closest('body').length) {
callback.call(scope);
} else {
setTimeout(function () {
self.callWhenReady(selector, callback, scope);
}, 1);
}
}
J'aime ça! Vous devriez ajouter " si (! $ (Sélecteur) .Length) renvoie; " au début pour éviter les boucles infinies lorsque le sélecteur ne correspond à aucun élément.
J'ai suivi le La réponse de GrancAnavera , mais j'ai utilisé la lengh parce que mon sélecteur existe déjà dans le corps ... Donc:
var finalLength = $(selector).html().length + data.length;
$(selector).html(data); //or $(selector).append(data);
//...
callWhenReady: function (selector, callback, finalLength, scope) {
var self = this;
if ($(selector).html().length === finalLength) {
callback.call(scope);
} else {
setTimeout(function () {
self.callWhenReady(selector, callback, scope);
}, 1);
}
}
Essayez d'utiliser Ready () , qui est "un moyen d'exécuter le code JavaScript comme Dès que le modèle d'objet de document de la page (DOM) devient sûr de manipuler. "
$('#yourID').html('new content').ready(function(){
// Do stuffs
});
Est-ce appelé à partir de votre fonction $ (document) .Ready ()?