Comment puis-je accéder aux styles calculés (par exemple, hauteur et largeur) d'un élément IFrame inter-domaines ?

Accès aux styles calculés entre domaines

Dans le développement Web, l'obtention de styles calculés à partir d'éléments inter-domaines peut poser un défi. Dans ce cas, votre objectif est de récupérer les styles calculés de hauteur et de largeur d'un élément dans une iframe provenant d'un domaine différent.

Approche

Pour accéder aux styles calculés dans ce scénario, envisagez les approches suivantes :

• window.getComputedStyle() pour WebKit Navigateurs :

  1. Les navigateurs WebKit (tels que Safari et Chrome) fournissent la méthode window.getComputedStyle().

  2. Vous pouvez l'utiliser comme suit :

     window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height");

  3. Cela renvoie la valeur de style calculée (par exemple, "1196px").

• element.currentStyle pour IE :

  1. Internet Explorer utilise la propriété element.currentStyle pour accéder aux styles calculés.

  2. Exemple utilisation :

     document.getElementById("frameId").currentStyle.height;

  3. Notez que element.currentStyle ne reflète que les styles explicitement définis sur l'élément, pas les valeurs calculées.

• Navigation dans le DOM d'iFrame :

  1. Si vous avez besoin d'accéder aux styles calculés de le contenu de l'iFrame (par exemple, l'élément HTML), vous pouvez naviguer dans le DOM de l'iFrame.
  2. Utilisez iframeObject.contentDocument.documentElement pour accéder à l'élément racine du document de l'iFrame.
  3. Vous pouvez ensuite appliquez window.getComputedStyle() ou element.currentStyle aux éléments appropriés dans l'iframe DOM.

Exemple

En utilisant le code que vous avez fourni, voici un exemple de la façon de récupérer le style calculé de la hauteur du HTML élément dans l'iframe en utilisant window.getComputedStyle():

window.getComputedStyle(document.getElementById("frameId").contentDocument.documentElement, null).getPropertyValue("height");

Supplémentaire Notes

• Assurez-vous que l'iframe a un attribut id pour faciliter la sélection des éléments.
• Les valeurs de hauteur et de largeur spécifiées dans votre capture d'écran semblent être en pixels, mais c'est essentiel pour vérifier leurs unités dans votre scénario réel.

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!