OVH Cloud OVH Cloud

afficher du texte seulement si javascript active

9 réponses
Avatar
pilouface
Bonjour,

En cherchant comment imprimer une page html directment depuis la page
consultée, je suis tombé sur ce code qui fonctionne bien
<a href="javascript:void(0)" onclick="window.print();">Imprimer</a>

Comme ce lien n'a une action que pur Javascript, et n'est utilisable que
pour les personnes qui ont JS activé, comment est-il possible de
n'afficher le lien que si Javascript est activé ?


merci pour votre aide

--
pilouface

9 réponses

Avatar
newdb
pilouface wrote:
Comme ce lien n'a une action que pur Javascript, et n'est utilisable que
pour les personnes qui ont JS activé, comment est-il possible de
n'afficher le lien que si Javascript est activé ?


tu intégres ton lien dans le html avec un "display:none;" ;
tu scriptes en js pour modifier le style.display :

<p id="print" style="display:none;">
<a href="#" onclick="window.print();">Imprimer</a>
</p>

<script type="text/javascript">
// permet d'utiliser gEBI
// sur le navigateur qui ne le reconnait pas...
if (!document.getElementById) {
if (document.all) {
document.getElementById = function(id){return document.all[id];}
}
}

// modifie, si js activé, le display de l"élément d'id "print"
if (document.getElementById("print")) {
document.getElementById("print").style.display = 'block';
}
</script>

--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="

Avatar
pilouface
merci denisb,

tu intégres ton lien dans le html avec un "display:none;" ;
tu scriptes en js pour modifier le style.display :


très bonne idée
mais qui ne semble pas fonctionner

j'ai mis le code tel quel dans une page pour essayer
http://filoufi.free.fr/aikido/calendrier_stages.php

tout à la fin du html (juste avant la fermeture du body) il y a bien
<p id="print" style="display:none;">
<a href="#" onclick="window.print();">Imprimer</a>
</p>


et dans le head le code que vous m'avez donné
<script type="text/javascript">
// permet d'utiliser gEBI
// sur le navigateur qui ne le reconnait pas...
if (!document.getElementById) {
if (document.all) {
document.getElementById = function(id){return document.all[id];}
}
}

// modifie, si js activé, le display de l"élément d'id "print"
if (document.getElementById("print")) {
document.getElementById("print").style.display = 'block';
}
</script>



malgré tout, le paragraphe 'print' ne s'affiche pas... vous avez une
idée de pourquoi ? Vous êtes sûr que le javascript peut redéfinir un
style déjà codé en dur dans le html ?



--
filoufi

Avatar
newdb
pilouface wrote:
malgré tout, le paragraphe 'print' ne s'affiche pas... vous avez une
idée de pourquoi ? Vous êtes sûr que le javascript peut redéfinir un
style déjà codé en dur dans le html ?


il faut intégrer le script DANS le html APRES le <p id="print" ...
sinon, document.getElementById("print") ne renvoie à rien, puisque pas
encore défini.

[....]
</tr>
</tbody>
</table>
<p id=pied>
<a href="http://aiki-club.com/" title="retour à la page
d'accueil">accueil</a> &gt; calendrier (<a href="javascript:void(0)"
onclick="window.print();"><img alt=Imprimer src=imp.png></a>)
</p>
<p id="print" style="display:none;">
<a href="#" onclick="window.print();">Imprimer</a>
</p>
<script type="text/javascript">
// permet d'utiliser gEBI
// sur le navigateur qui ne le reconnait pas...
if (!document.getElementById) {
if (document.all) {
document.getElementById = function(id){return document.all[id];}
}
}

// modifie, si js activé, le display de l"élément d'id "print"
if (document.getElementById("print")) {
document.getElementById("print").style.display = 'block';
}
</script>
</body>
</html>


--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="

Avatar
pilouface
merci denisb


il faut intégrer le script DANS le html APRES le <p id="print" ...


ça fonctionne bien, merci :)

mais je me demande s'il est possible de faire la même chose avec le code
javascript contenu dans un fichier externe appelé depuis le head ?

Je souhaite que le code soit totalement externe si possible, pour ne pas
alourdir la page inutilement aux personnes qui désactivent le javascript.

merci encore

--
pilouface

Avatar
newdb
pilouface wrote:
mais je me demande s'il est possible de faire la même chose avec le code
javascript contenu dans un fichier externe appelé depuis le head ?


dans le head, non, pour la raison évoquée plus haut ;
mais à partir d'un point quelconque du html, oui :

[....]
</tr>
</tbody>
</table>
<p id=pied>
<a href="http://aiki-club.com/" title="retour à la page
d'accueil">accueil</a> &gt; calendrier (<a href="javascript:void(0)"
onclick="window.print();"><img alt=Imprimer src=imp.png></a>)
</p>
<p id="print" style="display:none;">
<a href="#" onclick="window.print();">Imprimer</a>
</p>
<script type="text/javascript" src="le_print.js"></script>
</body>
</html>

avec dans le_print.js :

// permet d'utiliser gEBI
// sur le navigateur qui ne le reconnait pas...
if (!document.getElementById) {
if (document.all) {
document.getElementById = function(id){return document.all[id];}
}
}

// modifie, si js activé, le display de l"élément d'id "print"
if (document.getElementById("print")) {
document.getElementById("print").style.display = 'block';
}

ouh ha la...

--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="

Avatar
YD

En cherchant comment imprimer une page html directment depuis la page
consultée, je suis tombé sur ce code qui fonctionne bien
<a href="javascript:void(0)" onclick="window.print();">Imprimer</a>
comment est-il possible de
n'afficher le lien que si Javascript est activé ?


La solution la plus simple (plus simple que celle donnée par denisb),
remplacer la ligne en question par :

<script type="text/javascript">
document.write('<a href="javascript:void(0)" onclick="window.print();">Imprimer</a>n');
</script>

Ainsi c'est un script qui écrit la ligne...

--
Y.D.

Avatar
pilouface
merci YD

La solution la plus simple (plus simple que celle donnée par denisb),
remplacer la ligne en question par :

<script type="text/javascript">
document.write('<a href="javascript:void(0)"
onclick="window.print();">Imprimer</a>n');
</script>


ah oui, c'est plus simple

merci

mais j'aimerais que l'insertion du lien puisse se faire depuis un script
externe appelé dans le head

il semble que non selon denisb
dans le head, non, pour la raison [...]
document.getElementById("print") ne renvoie à rien, puisque pas
encore défini.



mais si par exemple on a dans le code html
<p id="pied">
....
</p>

et on veut que, pour les gens qui ont le Javascript, soit ajouté juste
avant la fermeture du paragraphe 'pied' le lien pour imprimer
<a href="javascript:void(0)" onclick="window.print();">Imprimer</a>

cela vous semble impossible en utilisant du getElementById('pied') ?


merci à tous les deux et bonne soirée

--
pilouface

Avatar
YD

mais j'aimerais que l'insertion du lien puisse se faire depuis un script
externe appelé dans le head

mais si par exemple on a dans le code html
<p id="pied">
.....
</p>

et on veut que, pour les gens qui ont le Javascript, soit ajouté juste
avant la fermeture du paragraphe 'pied' le lien pour imprimer
<a href="javascript:void(0)" onclick="window.print();">Imprimer</a>


Dans le script externe :

window.onload=function(){
document.getElemementById("pied").innerHTML+='<a href="javascript:void(0)" onclick="window.print(); return false;">Imprimer</a>n';
}

ou, plus long mais plus conforme aux standards :

window.onload=function(){
var printLink=document.createElement('A');
printLink.appendChild(document.createTextNode("Imprimer..."));
printLink.href="javascript:void(0);"
document.getElementById("pied").appendChild(printLink);
printLink.onclick=function(){window.print(); return false;}
}

--
Y.D.

Avatar
pilouface
merci YD


ou, plus long mais plus conforme aux standards :

window.onload=function(){
var printLink=document.createElement('A');
printLink.appendChild(document.createTextNode("Imprimer..."));
printLink.href="javascript:void(0);"
document.getElementById("pied").appendChild(printLink);
printLink.onclick=function(){window.print(); return false;}
}



Cela répond tout à fait, je souhaitais que ça soit conforme aux standards.

Et ce petit script va me permettre de mieux comprendre comment créer du
Javascript conforme. Je vais essayer de l'adapter pour un autre besoin
similaire.


merci !
et merci à denisb pour son aide aussi

bonne journée !

--
pilouface