Javascript Girl
  1. Javascript Girl
  3. FancyBox affiche le contenu d'un DIV comme type iFrame
Intereting Posts
Un objet peut-il se supprimer automatiquement en javascript une fois qu'il a atteint son but? Comment puis-je partager le code entre Node.js et le navigateur? ES 7 – Async vs. Rendement JQuery détecte et valide une URL Retourner à partir d'une méthode dans laquelle on a appelé la méthode de tableau EveryEach (). JavaScript JQuery (ou quelque chose) ne fonctionne pas correctement sur IE8 Comment puis-je centrer l'alignement d'une division sans connaître la largeur? Tri d'un tableau par lequel la valeur est la plus proche de 1 Obtenir la taille de la police calculée pour l'élément DOM dans JS Variable dans une chaîne à l'intérieur d'une chaîne Javascript AND opérateur dans l'affectation Impossible d'accéder à la propriété JSON avec le tableau "-" $ _POST après avoir enregistré les informations qui ont été retournées via Ajax Changer l'URL du popup déjà ouvert Cliquer sur l'étiquette ne déclenche pas l'événement de clic

FancyBox affiche le contenu d'un DIV comme type iFrame

Cela fonctionne parfaitement bien: 

<script type="text/javascript"> $(document).ready(function() { $.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'}); }); </script>

C'est-à-dire que FancyBox ouvre et affiche la page d'accueil CNN. Cependant, si je change l'attribut href en "#pg"

Et que la page soit codée de cette façon: 

  <body> <div id="pg"></div> <script type="text/javascript"> document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>"; </script> </body>

FancyBox s'ouvre mais aucun texte n'est affiché. (Le texte "texte moi maintenant" s'affiche dans l'élément #pg div. Notez qu'il est affecté au innerHTML du DIV à la fin de la page.)

Fondamentalement, je veux savoir s'il existe une façon d'initialiser dynamiquement la propriété innerHTML d'un DIV et de l'afficher comme FancyBox type iFrame? (Le contenu de iFrame aura un bouton qui imprime le document iFrame).

TIA

MISE À JOUR: 28/07/12

Comme l'a suggéré @arttronics, j'ai mis en place un jsFiddle

Pour résumer, finalement, l'objectif est de pouvoir cliquer sur un bouton contenu dans un FancyBox qui imprime tout le contenu de FancyBox sans ouvrir une autre fenêtre. (Je souhaite utiliser FancyBox comme visualiseur de rapport pour le contenu analysé par Javascript.)

Je suppose que je dois afficher le contenu en utilisant le lecteur iframe de FancyBox, mais je me trompe.

Le jsFiddle montre:

Le FancyBox peut afficher du texte qui valide en tant que page HTML en utilisant le lecteur en ligne. Le texte peut être référencé via href ou le content .

Cependant, lorsque le joueur est un iframe et que le contenu provient de href , le conteneur FancyBox est vide. Si le contenu provient de l'attribut content , FancyBox montre une erreur 404.

Il suffit de commenter et de décommenter le code jsFiddle pour voir ce que je veux dire.

Des idées sur la façon dont je peux répondre à mon objectif sont appréciées et obtiendrons un vote!

TIA.

Mise à jour: 31/07/2012

Ce nouvel exemple jsFiddle: le visualiseur de rapport Iframe fonctionne mais pas dans FancyBox

Comme vous pouvez le voir, j'ai essayé plusieurs façons d'afficher l' iframe dans FancyBox. Et tandis que FancyBox affiche le contenu de l' iframe , la fonction d'impression se casse.

Je pense qu'une méthode pour résoudre ce problème serait d'écrire le contenu du myContent var à FancyBox après son chargement, mais je ne peux pas (A) trouver le bon noeud DOM à écrire et (B) Je peux ' T obtenir FancyBox pour afficher un iframe utilisant son joueur iframe lorsque l' iframe src="about:blank" .

Aucune suggestion? Ou voyez-vous un moyen de réparer l'exemple jsFiddle?

Est-ce que vous vous attendez vraiment à ce que <iframe src="#myID"></iframe> ouvre un élément ayant myID dans iframe?

Si vous souhaitez imprimer du contenu de fancyBox, vous pouvez ajouter un bouton d'impression – http://jsfiddle.net/s3jRA/

Démo mise à jour – http://jsfiddle.net/qVrLr/ – pour la création et la mise à jour du contenu de l'iframe

Comme c'est souvent le cas, je regardais les choses en arrière. La solution (avec des mises en garde) est celle-ci, plutôt que d'afficher un élément div à l'aide du joueur iframe, cacher un iframe dans le html et l'afficher en utilisant le lecteur en ligne.

Voir cet exemple de travail: jsFiddle

Cela résout le problème consistant à pouvoir imprimer du contenu dynamique sans ouvrir une autre fenêtre. En outre, si le texte dépasse le FancyBox, l'intégralité du contenu est toujours imprimée. (C'est quelque chose que je ne pourrais pas arriver lorsque j'ai imprimé le FancyBox et que j'ai changé les différents styles de visibilité des éléments de page à cachés).

Mises en garde majeures

J'ai testé ceci dans IE 8 et ça marche, mais je ne peux toujours pas travailler sur Chrome.

L'une des raisons de cette approche était mon hypothèse que je pourrais inclure dans le contenu de la page dianmique un style d'impression @media. Cette technique ne fonctionne pas (dans IE de toute façon) pour une raison quelconque. Cependant, les styles en ligne fonctionnent comme les balises de balises HTML (notez la <strong> dans l'exemple jsFiddle: var myContent). Donc, quelque chose est étrange.