Utilisez jQuery pour modifier CSS sur le contenu IFRAME

Dans cet article, j'ai également inclus une documentation des tentatives infructueuses pour essayer de modifier le CSS du contenu iframed sur un domaine différent. De plus, quelques informations sur la façon de changer CSS dans un iframe sur le même domaine, qui (pour autant que je sache) ne puisse pas être effectuée sans un pass proxy ou autres.

Efforts de domaine croisé

Comment ça marche: comparé URL Résultat Raison http://www.example.com/dir/page.html Succès Même protocole et hôte http://www.example.com/dir2/other.html Succès Même protocole et hôte http://www.example.com:81/dir/other.html Échec Même protocole et hôte mais port différent https://www.example.com/dir/other.html Échec Protocole différent http://en.example.com/dir/other.html Échec Hôte différent http://example.com/dir/other.html Échec Hôte différent (correspondance exacte requise) http://v2.www.example.com/dir/other.html Échec Hôte différent (correspondance exacte requise)

insérer iframe:

<span>Ways to to change CSS in an iframe
</span><span>Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
</span>
<span><span>This</span> method didn't work for me.
</span><span>[js]
</span><span>var text = 'hi';
</span><span>var content = "" + text + "";
</span>
<span>var iframe = document.createElement("iframe");
</span>iframe<span>.src = ' document.body.appendChild(iframe);
</span>
<span>var doc = iframe.document;
</span><span>if(iframe.contentDocument)
</span>doc <span>= iframe.contentDocument; // For NS6
</span><span>else if(iframe.contentWindow)
</span>doc <span>= iframe.contentWindow.document; // For IE5.5 and IE6
</span><span>// Put the content in the iframe
</span>doc<span>.open();
</span>doc<span>.writeln(content);
</span>doc<span>.close();
</span>
doc<span>.getElementsByTagName("body").style.backgroundColor = 'red';</span>

Cette méthode n'a pas fonctionné pour moi.

<span>var cssLink = document.createElement("link")
</span>cssLink<span>.href = "style.css";
</span>cssLink <span>.rel = "stylesheet";
</span>cssLink <span>.type = "text/css";
</span>frames<span>['frame1'].document.body.appendChild(cssLink);</span>

Cette méthode a fonctionné pour moi.

<span>var frm = frames['frame'].document;
</span><span>var otherhead = frm.getElementsByTagName("head")[0];
</span><span>var link = frm.createElement("link");
</span>link<span>.setAttribute("rel", "stylesheet");
</span>link<span>.setAttribute("type", "text/css");
</span>link<span>.setAttribute("href", "style.css");
</span>otherhead<span>.appendChild(link);</span>

Cette méthode a fonctionné pour moi.

var iframe = top.frames [name] .Document; var css = ” "

Les questions fréquemment posées sur le changement de CSS dans le contenu IFRAME

Pourquoi ne puis-je pas modifier le CSS d'un iframe à partir d'un domaine différent?

Cela est dû à la «politique d'origine homosexuelle» qui est un aspect essentiel de la sécurité du Web. Il empêche un script d'une page accéder ou modifier les propriétés d'une autre page à partir d'un domaine différent. Cette politique est mise en œuvre pour empêcher les scripts potentiellement malveillants d'accéder à des données sensibles sur une autre page Web.

Y a-t-il une solution de contournement pour modifier le CSS d'un iframe transversal?

Malheureusement, pour les raisons de sécurité mentionnées ci-dessus, il n'y a pas de moyen direct de modifier le CSS d'un iframe transversal. Cependant, si vous avez un contrôle sur la page source de l'IFRAME, vous pouvez ajouter un script pour recevoir des messages de la page parent et apporter les modifications nécessaires.

Comment puis-je modifier le CSS d'un iframe si elle est du même domaine?

Si l'IFRAME est à partir du même domaine, vous pouvez accéder directement à son contenu et modifier le CSS en utilisant jQuery. Voici un exemple simple:
$ ("# myiframe"). Contenu (). Rechercher ("Body"). CSS ("Background-Color", "Red");
Cela changera la couleur d'arrière-plan du corps de l'Iframe en rouge.

Puis-je utiliser JavaScript au lieu de jQuery pour modifier le CSS d'un iframe?

Oui, vous pouvez utiliser JavaScript simple pour modifier les CS d'un iframe. Voici comment vous pouvez le faire:
var iframe = document.getElementByid ('myiframe');
var ifRamedoc = iframe.contentDocument || iframe.contentwindow.Document;
iframedoc.body.style.backgroundcolor = "red";
Cela modifiera également la couleur d'arrière-plan du corps de l'Iframe en rouge.

Pourquoi ne pourrait pas être modifiée à cela. L'IFRAME pourrait provenir d'un domaine différent, auquel cas vous ne pouvez pas modifier son CSS en raison de la politique d'origine même. Ou, le contenu de l'Iframe n'a peut-être pas été entièrement chargé lorsque vous avez essayé de modifier le CSS. Pour vous assurer que l'IFRAME est entièrement chargé, vous pouvez utiliser l'événement de chargement.

Puis-je utiliser la méthode du post-message pour modifier le CSS d'un iframe transversal?

Oui, si vous avez un contrôle sur la page source de l'IFRAME, vous pouvez utiliser la méthode post-message modifie.

Comment puis-je m'assurer que mes modifications CSS sont appliquées après le chargement entièrement chargé?

Vous pouvez utiliser l'événement de chargement pour vous assurer que l'IFRAME est complètement chargé avant d'essayer de modifier son CSS. Here’s how you can do it with jQuery:

$("#myIframe").on("load", function() {

$(this).contents().find("body").css("background-color", "red");
});
This will change the background color of the iFrame’s body to red after the iFrame is fully loaded.

Puis-je modifier le CSS du contenu d'un iframe s'il s'agit d'un PDF?

Non, vous ne pouvez pas modifier le CSS d'un fichier PDF. CSS est une langue de feuille de style utilisée pour décrire l'apparence et le formatage d'un document écrit en HTML ou XML. Les fichiers PDF ont leur propre format et ne peuvent pas être stylisés avec CSS.

Puis-je utiliser CSS pour modifier la taille d'un iframe?

Oui, vous pouvez utiliser CSS pour modifier la taille d'un iframe. Voici comment vous pouvez le faire:

iframe {

largeur: 500px;
hauteur: 300px;
}
Cela modifiera respectivement la largeur et la hauteur de l'IFRAME à 500px et 300px respectivement.

la frontière d'un iframe. Voici comment vous pouvez le faire:

iframe {

Border: Aucun;

}

Cela supprimera la bordure de l'Iframe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!