jQuery Girl
  1. jQuery Girl
  3. Fancybox 2.1.3 empêchant l’iframe d’avoir des barres de défilement
Intereting Posts
jquery ajaxStart ne fonctionne pas Définir l’option initiale sélectionnée pour la sélection rendue dans DataTables Pesage des options Javascript du domaine Empêcher le défilement de page – Désactiver le glissement JQuery.ready () est-il valide lorsqu’il est utilisé sur iframe.contentDocument? JQuery en boucle et attacher des événements de clic récupère les données du contrôleur dans un allumeur de code JSON jquery when / then (également quand / done) n’attend pas Que pensez-vous des rappels respectifs pour les déclencheurs modaux bootstrap? Code jQuery, ne comprenant pas jQuery-textcomplete ne fonctionne pas sur les div de contenteditable de l’extension Chrome Masquer un élément lorsqu’un certain défilement a eu lieu Ajax ne fonctionne pas avec jquery Flip! twigr Envoi d’un tableau d’objects à WCF Comment rendre un modèle jQuery.tmpl en chaîne?

Fancybox 2.1.3 empêchant l’iframe d’avoir des barres de défilement

J’utilise la version 2.1.3 de fancybox.js pour placer du contenu externe dans un iframe. Je le fais en plaçant l’URL suivie d’un identifiant div (par exemple, http: //somesite.com#about ), cela semble fonctionner, mais le problème est que je n’ai pas trouvé le moyen d’arrêter le défilement de fancybox. Empêcher le défilement est nécessaire car je vais placer plusieurs identifiants div sur la même page externe, puis les placer dans des iframes avec fancybox. page externe. 

//fancybox window script $(document).ready(function() { $(".various").fancybox({ type :'iframe', scrolling : 'no', maxWidth : 800, maxHeight : 400, fitToView : true, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none', }); });

Vous pouvez désactiver le défilement en utilisant un assistant comme suit: 

  iframe : { scrolling : 'no' }

Pourquoi ne chargez-vous pas uniquement le fragment dont vous avez besoin plutôt que le document entier? De cette façon, vous n’avez pas besoin d’empêcher le défilement.

Si c’est une option, vous devrez changer la façon dont vous chargez le fichier … une sorte de méthode ajax fonctionnerait mieux au lieu d’iframe.

Je suggère d’utiliser jQuery .load() pour extraire uniquement la div interne demandée référencée par son ID …. donc si vous ciblez href="http://somesite.com" par exemple, nous aurions besoin de call $("#targetContainer").load("http://somesite.com #about");

Pour y parvenir, nous aurions besoin de scinder le hash ( #about ) de l’ url pour passer le format approprié à la méthode .load() (notez l’espace entre l’ url et le hash ) … donc avoir ce code HTML 

 about

… ce script devrait fonctionner: 

 // open only selected div (hash) var thisHref, thisHash; $(".various").on("click", function() { thisHref = this.href.split("#")[0]; thisHash = this.href.split("#")[1]; targetContent = $("
").load(thisHref + " #" + thisHash); $.fancybox(targetContent, { maxWidth: 800, maxHeight: 400, fitToView: true, width: '70%', height: '70%', autoSize: false, closeClick: false, openEffect: 'none', closeEffect: 'none' }); // fancybox return false; // prevent default }); // on

Voir cette démo de travail . Le premier lien extrait l’intégralité du fichier pour que les barres de défilement apparaissent tandis que le suivant ne contient que le fragment demandé.

REMARQUE : En raison des ressortingctions de sécurité du navigateur, la plupart des requêtes “Ajax” sont soumises à la même stratégie d’origine . la demande ne peut pas récupérer les données d’un domaine, sous-domaine ou protocole différent.

BTW, .on() requirejs jQuery 1.7+

Très facile: il suffit d’append 

  .fancybox-inner { overflow: hidden !important; }

Et les barres de défilement ont disparu!

Vous pouvez simplement éditer le fichier Fancybox “jquery.fancybox.js”.

Changement: 

 iframe : { scrolling : 'auto', preload : true }

dans ceci: 

 iframe : { scrolling : 'no', preload : true }

Vérifié pour Fancybox 2.1.5.