web-dev-qa-db-fra.com

Ajouter CSS à iFrame

Duplicata possible:
Comment appliquer CSS à iFrame?

En ce moment, je charge un iframe via jquery:

 $(window).load(function(){
  $('iframe').load(function() {
      $('iframe').show()
      $('#loading').hide();

    });
    $('#loading').show();
    $('iframe').attr( "src", "http://www.url.com/");

  });

Et j'ai une feuille de style personnalisée que je voudrais appliquer à cette page. La page dans l'iframe n'est pas sur le même domaine, c'est pourquoi c'est délicat. J'ai trouvé des solutions qui vous permettent d'ajouter des balises individuelles, mais pas des feuilles de style entières.

EDIT: La page en question est chargée via file:// dans Mobile Safari, la politique interdomaines ne s'applique donc pas.

jquerycssiframe
29
Peter Kazazes

Basé sur une solution Vous avez déjà trouvé Comment appliquer CSS à iframe? :

var cssLink = document.createElement("link") 
cssLink.href = "file://path/to/style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['iframe'].document.body.appendChild(cssLink);

ou plus jqueryish (de Ajouter une feuille de style à un iframe avec jQuery ):

var $head = $("iframe").contents().find("head");                
$head.append($("<link/>", 
    { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));

comme pour les problèmes de sécurité: Désactivation de la politique de même origine dans Safari

57
Jacek Kaniuk