2010-06-12 6 views
1

J'ai un problème étrange et je ne trouve aucune réponse sur google ... Je crée dynamiquement et remplit un iframe avec jquery sur une page. Il fonctionne très bien avecFF et IE, mais pas avec Safari.Iframe créé dynamiquement ne fonctionne pas sur Safari

L'iframe est créé mais vide (le message "salutations de l'iframe!" Est manquant). Voici un morceau de code pour l'illustrer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" > 
<head> 
    <title>iframe</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

    var jFrame = $('<iframe id="myiframe" name="myiframe">'); 
    jFrame.css({'height':'40px','width':'200px'}).appendTo($('#container')); 

    $('#myiframe').load(function() { 
    jFrame.contents().find("body").html('greetings from the iframe !'); 
    }); 

    }); 
    </script> 
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html> 

Je me demande vraiment pourquoi le iframe reste vide avec Safari. Il semble que si "contents()" n'était pas bien interprété ...

Une idée?

Répondre

2

Assurez-vous d'attacher le gestionnaire d'événements load avant de pouvoir éventuellement le feu, comme ceci:

$('<iframe id="myiframe" name="myiframe" />') 
    .css({'height':'40px','width':'200px'}) 
    .load(function() { 
    $(this).contents().find("body").html('greetings from the iframe !'); 
    }) 
    .appendTo('#container'); 

Cela dit, je ne suis pas positif de l'événement load est nécessaire au feu s'il n'y avait pas charge réelle (votre cadre n'a pas src), tous les navigateurs peuvent suivre les spécifications ici, mais encore être incohérent. Mais ... Safari a toujours été un peu "off" avec load et ready événements, donc en utilisant l'approche ci-dessus aidera autant que possible. Une dernière note, .appendTo() peut prendre un sélecteur directement;)

+0

Cher Nick, Merci pour votre réponse, ça fonctionne très bien! Je suis assez novice avec jQuery et je ne comprends pas honnêtement pourquoi mon morceau de code ne fonctionne pas comme le vôtre. Est-ce quelque chose à propos de synchro/asynchro? Merci encore une fois, mhammout – user365351

+0

@mhammout - Le problème est que l'événement 'load' se déclenche * immédiatement * lorsque vous l'avez inséré dans le DOM, avant que votre' .load (...) 'ait même une chance de courir, alors même si elle a truqué un gestionnaire à exécuter lorsque cet événement se produit, l'événement * déjà * arrivé, a un sens? –

+0

c'est le cas, merci! – user365351

Questions connexes