2013-04-26 6 views
1

Je veux ajouter l'élément à la tête d'un Iframe (fancybox)Adjonction Lien vers la tête de Iframe

il y a un problème étrange: quand j'utilise Firefox pour point d'arrêt sur la ligne de code qui append élément à sa tête fonctionne correctement mais quand je cours le site normalement sans firebug cela ne fonctionne pas;

J'utilise fancybox 1.3.4 et l'exécution de code dans l'événement onComplete

var cssLink = document.createElement("link") 
cssLink.href = "/themes/furniture/css/test.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 


var f123= document.getElementById('fancybox-frame'); 

var d123= f123.contentDocument || f123.contentWindow.document; 

d123.head.appendChild(cssLink); 

MISE À JOUR

J'essaie aussi ce code

var $head = $("#fancybox-frame").contents().find("head");     
$head.append($("<link/>", 
{ rel: "stylesheet", href: "/themes/furniture/css/test.css", type: "text/css" })); 

mais il ne fonctionne pas non plus

Tnx

+0

'Je veux ajouter un élément à la tête d'un Iframe' qui est bon, mais où est votre code? http://stackoverflow.com/faq#questions – JFK

+0

Ok. J'insère le code. le code fonctionne correctement lorsque j'utilise breakpoint sur firebug mais ne pas ajouter enfant lorsque le site est normalement exécuté –

+1

même si vous utilisez onComplete, avez-vous essayé d'utiliser un timeout? Cela ressemble à une condition de course pour moi - que diriez-vous d'autres navigateurs? Si c'est juste un problème FireFox, utilisez un autre 'setTimeout (..., 50)' après le onComplete et voyez si cela fonctionne. (c'est moche, mais si ça marche j'irais avec) – olsn

Répondre

1

Eh bien, il semble être une condition de course en effet (comme l'a souligné olsn dans son commentaire) entre le chargement de l'iframe et de trouver des éléments à l'intérieur de celui-ci, qui échoue si le second se produit d'abord;)

Pour contourner ce problème, vous pouvez utiliser la méthode .load() pour attendre que le iframe soit complètement chargé avant d'essayer de append la feuille de style à la section <head>.

Ce code devrait faire l'affaire:

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     "type": "iframe", 
     "onComplete": function() { 
      var $style = '<link rel="stylesheet" href="/themes/furniture/css/test.css" type="text/css" />'; 
      $("#fancybox-frame").load(function() { 
       $(this).contents().find("head").append($style); 
      }); 
     } 
    }); 
}); 

Remarque: ceci est pour fancybox v1.3.4. Heureusement 2.x comprend les méthodes publiques plus souples que v1.3.4 pour contourner ce problème, comme afterLoad et beforeShow

Notez également que setTimeout() fonctionnera aussi, mais il rend curieusement.

+0

Tnx .try mais lors du débogage avec firebug le code à l'intérieur de load() ne s'exécute pas. saute juste dessus. –

+0

enfin, cette solution fonctionne comme un charme.TNX –