Slider depuis un iframe
Bonjour,
Comme toujours quand vraiment je bloque.... merci Grafikart!!!!
Voila; j'ai un iframe qui comprend une liste classique <ul><li>...
je souhaiterais que chaque li aparaisse dans un slider, mais je ne comprend pas pourquoi mon code Jquery n'a aucun impacte sur cet Iframe.
je travail sous wordpress, j'ai ajouté l'iframe dans une page "accueil", et j'ai essayé de faire fonctionner le script depuis la page même, le header, le footer mais rien à faire aucun resultat (sur une page test j'ai collé tout mon HTML suivit du script Jquery et ca fonctionne parafaitement)
N'est il pas possible d'avoir acces au code de l'iframe avec du Jquery?
ou ai-je mis mon script au mauvais endroit?
Je prend tout idée ou suggestion!
meme si elle demande une demarche differente!
Merci à vous!
J'attends vos lumieres!
Bonne apres midi!
9 réponses
c'est un peu compliqué vu que c'est un Iframe.... et que le HTML lié est assez long.
ci dessous le jquery associé qui fonctionne parafitement quand dans un fichier test je met mon code html recupéré suivit du script jquery
<iframe>/*insert de mon iframe*/</iframe>
<script>
jQuery(document).ready(function ($) {
setInterval(function () {
moveRight();
}, 3000);
var slideCount = $('#iframe-content ul li').length;
var slideWidth = $('#iframe-content ul li').width();
var slideHeight = $('#iframe-content ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#iframe-content').css({ width: slideWidth, height: slideHeight });
$('#iframe-content ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#iframe-content ul li:last-child').prependTo('#iframe-content ul');
function moveLeft() {
$('#iframe-content ul').animate({
left: + slideWidth
}, 200, function () {
$('#iframe-content ul li:last-child').prependTo('#iframe-content ul');
$('#iframe-content ul').css('left', '');
});
};
function moveRight() {
$('#iframe-content ul').animate({
left: - slideWidth
}, 200, function () {
$('#iframe-content ul li:first-child').appendTo('#iframe-content ul');
$('#iframe-content ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
</script>
Salut,
Pourquoi passer par une iframe pour afficher un slider? C'est plutôt bizarre non ?
Mis à part si tu récupères le contenu d'un autre site au quel cas c'est mort (je ne cautionne pas ce genre de chose, donc je n'aide pas ^^)
Non, je ne passe pas par un iframe pour afficher un slider, je veux afficher en slider les elements d'un iframe!
je travail pour un site d'hotels, qui utilise un service proposé par une compagnie tiers pour afficher les commentaires des clients.
ces commentaires s'affiche au travers d'un iframe, et il s'agit de chacuns de ces commentaires que je souhaiterais voire defiler sur ma page!
Le javascript n'a aucun effet sur le contenu d'une iframe, c'est une sécurité du navigateur. Essaie de debug $('#iframe-content ul li') et tu verras que ça ne sélectionne aucun élément. Je n'ai pas d'alternative à proposer en revanche, si ce n'est de récupérer les commentaire depuis PHP par exemple (en téléchargeant la page, en parsant les données, et en sauvegardant dans ta base ces derniers).
Ah donc dans ce cas là, tu peux regarder ceci http://www.w3schools.com/jsref/prop_frame_contentdocument.asp.
Après je n'ai jamais eu à expérimenter ce genre de cas.
Sinon la solution de @Grafikart peut solutionner ton problème, mais cela reste assez compliqué. Quoi qu'il en soit, si tu passes par cette solution, une fois la page sniffée, regarde du côté de la lib PHP 'PHP Simple DOM Parser' : http://simplehtmldom.sourceforge.net/, https://davidwalsh.name/php-notifications ou via l'API de PHP directement : http://php.net/manual/fr/domdocument.loadhtml.php
Merci pour vos reponses! je ne svais pas que le JavaScript n'avait pas d'effet sur les iframe.
Je regarde tous ca et reviens vers vous, vous tenir au courant!
Bon Dimanche à tous!
Je ne suis pas tous a fait d'accord avec votre reponse.
le javascript n'a aucun impact sur une iframe : oui mais si l'iframe n'est pas du meme domaine.
en revanche si j'appele une iframe qui est sur le meme nom de domaine que la page parent, il est tous a fait possible de modifier le comportement de l'iframe
Index.html
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<iframe src='iframe.html'></iframe>
<button onClick='Red()'>Red</button>
<button onClick='Blue()'>Blue</button>
<script>
var Red = function(){
$('iframe').contents().find('#test').css('color','red');
}
var Blue = function(){
$('iframe').contents().find('#test').css('color','blue');
}
</script>Iframe.html
<div id='test'>Bonjour</div>