intro ,
définition ,
popup window:
solution 1 ,
solution 2 ,
old ,
more
intro
oubliez cette page; trop d'horreurs ici (2021)
pour dynamiser les pages html: javascript
oui mais.... attention!
définition
Le JavaScript discret (
Unobtrusive JavaScript ) est une pratique dans la programmation informatique en JavaScript.
Cette pratique n'est pas décrite par une norme.
Cette pratique consiste en la séparation du code HTML et du JavaScript. (src:
wikipedia )
<![CDATA[
<a href="javascript:popup('frog.png')"><img src="frog.png" alt="" /></a>
]]>
Problème: si javascript n'est pas activé cette image restera invisible.
Il faut donc faire en sorte que l'image soit accessible sans javascript.
On fera donc un code du type:
<![CDATA[
<a href="frog.png" onClick="popup('frog.png')"><img src="frog.png" alt="" /></a>
]]> solution 1
Et les solutions existent depuis longtemps (2006?):
* easy
but bad method
<![CDATA[
<a href="javascript:openPopup('popup.htm')">Open Popup</a>
]]>
* a better popup
<![CDATA[
<script>
function openPopup(url) {
window.open(url, "popup_id", "scrollbars,resizable,width=400,height=200");
}
...
<a href="popup.htm" onclick="openPopup(this.href);">Open Popup</a>
</script>
]]>
oui, mais là j'ai 2x le résultat (si JS est activé)
* the best method
<![CDATA[
<script>
function openPopup() {
var url = this.href;
window.open(url, "popup_id", "scrollbars,resizable,width=400,height=200");
return false;
}
function init() {
var popups = getElementsByClassName("popup");
for(var i=0;i<popups.length;i++) {
popups[i].onclick=openPopup;
}
}
window.onload=init;
</script>
...
<a href="popup.htm" class="popup">Open Popup</a>
]]>
class?
src: binnyva.blogspot.fr/2006/04/best-way-to-open-popup.html
solution 2
popup.htm info et exemple que
j'utilise (maintenant) dans index2.htm
<![CDATA[
<a href="http://be4.free.fr/" rel="popup console 800 600">
....
<script type="text/javascript" src="add-event.js"></script>
<script type="text/javascript" src="popup.js"></script>
]]>
src: accessify.com/features/tutorials/the-perfect-popup/
old (wrong) src
jadis (until 2013) dans index2.htm
dans beau du tout
:-(
<![CDATA[
<script type="text/javascript"> function OuvrirPopup(page,nom,option) { window.open(page,nom,option); }</script>
....
<a href="javascript:OuvrirPopup('jeudi/vmap3meteo.htm', '', 'resizable=no, location=no, width=256, height=256, menubar=no, status=no, scrollbars=no, menubar=no')">pluie</a>,
<a href="javascript:OuvrirPopup('savoir/soleil/sole_mini_fr.htm', '', 'resizable=yes, location=no, width=200, height=150, menubar=no, status=no, scrollbars=no, menubar=no')">soleil</a>,
<a href="javascript:OuvrirPopup('savoir/moonclock.htm', '', 'resizable=no, location=no, width=200, height=50, menubar=no, status=no, scrollbars=no, menubar=no')">lune</a>
]]> more
www.onlinetools.org/articles/unobtrusivejavascript
antistatique.net/blog/2009/02/27/javascript-non-obstructif/
