Sujet Précédent Sujet Suivant

Problème lors de l'intégration dans l'iframe

Fermé
ProgrammeusePerdue - 18 déc. 2020 à 11:32
Bonjour à toutes et à tous,
C'est la première fois que je demande de l'aide sur un forum, je suis complètement bloquée.

Je suis en stage et mon but est de créer une bannière extensible pour une pub. Chose qui fonctionne parfaitement. Une employée a intégré le code que je lui ai fourni (qui fonctionne en local et sur admanager) dans le site web de leur boite, et la le drame rien de s'affiche.

Elle m'a dit qu'elle l'a intégré dans une iframe et me dit "Il doit y avoir un truc sur la fenêtre parent : window.parent.document" puis "En fait, c'est un histoire de fenetre parent, puisque la pub s'affiche dans un iframe, l'objectif est que tu arrives à le faire afficher dans la fenêtre accueillant l'iframe : la fenêtre parent".

Je ne comprend mais alors rien du tout. Pourquoi mon code qui fonctionne indépendamment ne fonctionnerait pas dans une iframe ? Pour quelle raison ai-je besoin d'appeler le document parent ? Cela fait des heures que je cherche mais je ne comprend pas du tout, surtout que je n'ai pas accès au code de leur site...
Je n'ai pas la moindre idée de ce que je pourrais faire.

Si vous avez des conseils ou peut importe je suis vraiment preneuse, c'est très stressant de ne pas recevoir d'aide en stage..
Dans tous les cas je vous remercie de tout coeur.

Voici mon code :
<body>
<footer>

<img id="petite" src="img/petiteBanniere.jpeg" alt="petite"/>

<img id="grande" src="img/grandeBanniere.jpeg" alt="grande"/>
</footer>

<script type="text/javascript">

// On met par défaut la grande image en cachée
var grande = document.getElementById("grande");
grande.style.display="none";

//On récupère dans une variable la petite image
var petite = document.getElementById("petite");

//Pose d'écouteur sur la petite image, on active la fonction expand quand on passe la souris dessus
petite.addEventListener("mouseover",expand);

//Fonction qui cache la petite image pour laisser place à la grande
function expand (){
petite.style.display="none";
grande.style.display="";
//On enlève la couleur noir du background
document.querySelector("footer").style.backgroundColor = "transparent";
}

//Pose d'écouteur sur la grande image
grande.addEventListener("mouseout",unExpand)

//Fonction qui cache la grande image pour laisser place à la petite
function unExpand (){
petite.style.display="";
grande.style.display="none";
//On rajoute la couleur noir dans le background
document.querySelector("footer").style.backgroundColor = "black";
}

//Lien redirection
var clickTag = "https://www.harley-davidson.com/fr/fr/index.html";

//Redirection quand on click sur la grande ou petite image (Si la grande ne fonctionne pas)
petite.addEventListener("click",lien);
grande.addEventListener("click",lien);

function lien(){
window.open(window.clickTag);
}

</script>
</body>

Code CSS:
footer{
position:absolute;
bottom: 0;
width: 100%;
visibility: visible;
background-color: black;
}

#petite{
width: 1000px;
height: 40px;
display: block;
margin-left: auto;
margin-right: auto;
}

#grande{
width: 1000px;
height: 300px;
display: block;
margin-left: auto;
margin-right: auto;
}