Le blog de Philippe Poisse - Mot-clé - HTML52024-03-28T22:26:21+01:00Philippe Poisseurn:md5:461e3511a43adbbb7d3a84a8af2d4212DotclearAfficher un PDF dans une page weburn:md5:a940336438a29b49972ad89fb3e8a88b2018-04-11T16:39:00+02:002018-04-11T16:39:00+02:00Philippe PoisseWebHTML5PDF<p>Vous avez toujours rêvé d’afficher un document au format PDF directement dans votre site web, mais vous ne savez pas comment faire. Voici le tutoriel qui vous faut.</p> <h2>Le code HTML</h2>
<pre>
<code><object data="http://blog.philippe-poisse.eu/index.php?post/2018/04/11/monPDF.pdf" type="application/pdf" width="100%" height="600" typemustmatch></code>
<code> <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="http://blog.philippe-poisse.eu/index.php?post/2018/04/11/monPDF.pdf">télécharger le fichier PDF.</a></p></code>
<code></object></code>
</pre>
<h2>Explication du code</h2>
<p>Tout d’abord on va utiliser la balise « object ».<br />
Elle est tout à fait classique, donc je ne reviendra pas trop dessus.<br />
Les attributs importants sont « data » et « type ».<br />
Le premier attribut va contenir l’url du fichier PDF. Libre à vous d’utiliser un chemin absolu ou relatif.<br />
Le deuxième attribut sert à indiquer le type de fichier que le navigateur doit attendre. Dans le cas d’un PDF on indique « application/pdf ». L’utilisation de « typemustmatch » permet de sécuriser l’affichage du document. S’il ne s’agit pas d’un PDF il ne doit pas être affiché.<br />
Les autres attributs possibles pour « object » peuvent être utilisés. C’est le cas pour « width », « height », « id » ou « class ».</p>
<p>La balise « object » permet d’afficher un contenu en cas de problème avec le PDF. Vous pouvez mettre un simple message d’erreur ou un contenu alternatif.</p>
<h2>Quelques liens pour aller plus loin</h2>
<ul>
<li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies" hreflang="fr_FR" title="la balise embed sur le site de Mozilla">https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/typeMustMatch" hreflang="en_US" title="L'attribut typeMustMatch sur le site de Mozilla">https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/typeMustMatch</a></li>
</ul>http://blog.philippe-poisse.eu/index.php?post/2018/04/11/Afficher-un-PDF-dans-une-page-web#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/245Jouer avec les titres des onglets avec JavaScripturn:md5:e3beb71cac20de20dedda4388cbf81f92017-07-27T16:48:00+02:002017-07-27T16:48:00+02:00Philippe PoisseProgrammationHTML5JavaScripttitre<p>Si vous suivez mon blog vous savez que je n’accroche pas trop avec le JavaScript. Mais il faut reconnaître que certaines fonctions permettent de s’amuser un peu. Aujourd’hui je vous montre comment modifier le titre d’un page web lors de l’ouverture d’un nouvel onglet.<br />
Cela ne sert à rien, c’est fondamentalement inutile donc rigoureusement indispensable.</p> <h2>Le code HTML</h2>
<h2> </h2>
<p>À ce niveau-là ça va être rapide. Dans l’entête de la page il faut mettre une balise « title » avec votre titre.<br />
Cette balise est importante pour votre référencement, les moteurs de recherche s’en servent pour l’affichage des résultats.</p>
<p>Le code est donc :</p>
<pre>
<code><title>Le titre de ma page.</title></code>
</pre>
<h2>Le JavaScript</h2>
<pre>
<code>var titre;</code>
<code>titre = document.title;</code>
<code>window.onfocus = function() {</code>
<code> document.title = titre;</code>
<code>};</code>
<code>window.onblur = function() {</code>
<code> document.title = "N’hésitez pas à revenir !";</code>
<code>};</code>
</pre>
<p>Là aussi je fais dans le rustique. Il existe sûrement plein de méthodes avec divers framework pour obtenir le même résultat. Mais moins j’en fais mieux je me porte.</p>
<h2>Explication du code</h2>
<p>Généralement les CMS créent le titre de la page automatiquement, donc il n’est pas nécessaire de sans soucier. Il suffit juste de le récupérer et de le passer dans une variable pour pouvoir le manipuler.<br />
Dans un premier temps on crée donc une variable « titre ».</p>
<pre>
<code>var titre ;</code>
</pre>
<p>Cette écriture permet de déclarer une globale, ainsi chacune des fonctions pourra l’utiliser.<br />
Puis on la remplit avec le contenu de la balise « title ».</p>
<pre>
<code>titre = document.title;</code>
</pre>
<p>Le but de la manœuvre est de changer ce qui s’affiche dans l’onglet lorsque l’on quitte la passe. Cet événement correspond à « window.onblur ».<br />
La fonction est toute simple.</p>
<pre>
<code> « function() {</code>
<code> document.title = "N’hésitez pas à revenir !";</code>
<code> }; »</code>
</pre>
<p>Si on en reste là, lorsque l’internaute revient dans la page le titre d’origine ne s’affiche plus. Une deuxième fonction est donc nécessaire. Elle est déclenchée par l’événement « window.onfocus ».</p>
<pre>
<code>function() {</code>
<code> document.title = titre;</code>
<code> };</code>
</pre>
<p>Dans le cas présent la fonction utilise la variable globale « titre » de manière à afficher le titre d’origine. Évidemment rien ne vous empêche d’afficher autre chose.</p>
<p class="conclusion" id="conclusion">À part faire le cacou ce tutoriel n’a pas trop d’utilité dans le monde réel. Mais bon, c’est l’été, on a le droit de se détendre un peu.</p>
<script>
var titre;
titre = document.title;
window.onfocus = function() {
document.title = titre;
};
window.onblur = function() {
document.title = "N'hésitez pas à revenir sur mon blog :)";
};
</script>http://blog.philippe-poisse.eu/index.php?post/2017/07/27/Jouer-avec-les-titres-des-onglets-avec-JavaScript#comment-formhttp://blog.philippe-poisse.eu/index.php?feed/atom/comments/231