Calculer le nombre px en hauteur d'un page

**dancom5** · 17/02/2012, 02h11

Bonjour.

De quelle manière peut-on déterminer la hauteur en pixel d'un rendu HTML d'une page?

Mon but est de placer cette valeur dans une balise pour la hauteur.

Exemple, un iframe qui s'ajuste selon la hauteur de la dite page.

Je veux placer l'affichage de cette page dans une autre via un cadre. Mais la hauteur en pourcentage ne fonctionne pas; même en javascript.

De l'aide me serait utile.

**Benjamin Delespierre** · 17/02/2012, 09h10

Quelle est la finalité ?

**dancom5** · 17/02/2012, 12h13

J'essais de trouver la réponse. PHP nous réserve souvent des surprises.
Y'a surement un moyen de résoudre la situation.

Tout le monde sur le net a un problème avec les questions de hauteur
"height" quand il s'agit d'un iframe ou un cadrage html.

Depuis peu, on peut protéger contre l'affichage par d'autre site via un iframe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Header always append X-Frame-Options SAMEORIGIN

Mais, c'est selon le navigateur. ça c'est le premier élément que je cherchais. Le 2e déterminer la hauteur du fichier cible.

Envoyé par Benjamin Delespierre

Quelle est la finalité ?

**Benjamin Delespierre** · 17/02/2012, 12h25

PHP ne peut pas calculer la hauteur d'affichage du navigateur, seul JavaScript le peut. Fais une recherche avec les mots clés "javascript windows height" tu trouvera pleins de solution car il y a plusieurs façon d'obtenir le résultat suivant le navigateur.

**dancom5** · 18/02/2012, 04h25

Je ne pense pas qu'utiliser un iframe puisse fonctionner dans mon cas.

Je vais plutôt m'orienter vers les includes PHP avec ajax.

Sauf que je ne connais rien en Ajax. Je ne peux pas utiliser jquery
à cause que mon code en utilise et ça entre en conflit.

Si quelqu'un peut m'orienter sur le sujet, ça m'aiderait.

**omdafer** · 18/02/2012, 06h47

Je ne pense pas qu'il existe de tel fonction en php.
La seule solution serait d'extraire les données d'un site par exemple avec file_get_contents(), interpreter tout les balises, mise en page, css, javascript,images, ..., comme un vrai navigateur. C'est un boulot monstre.

A moins qu'il existe une librairie sachant faire ça.

Non, je vois plus JS, Ajax faire ça à l'aide de ton navigateur.

J'ai trouvé ça en Ajax :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var MyWidth = 800;
var MyHeight = 700;
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return}
xhr_object.open("GET", "traitement.php?width="+MyWidth +"&height="+MyHeight , false); 
xhr_object.send(null); 
if   (xhr_object.readyState == 4)
{
   if (xhr_object.responseText!='')
   {
      alert("traitement effectué avec succès");
   }
}

sur http://forum.webrankinfo.com/taille-...hp-t89689.html

**dancom5** · 18/02/2012, 11h09

Merci pour l'info. Cependant, si je fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php include('mapage.php'); ?>

serait plus approprié dans mon cas, sauf que je dois éviter le rafraichissement de toute la page principale. C'est pour cela que je voulais utiliser un iframe. Mais ceux-ci utilise un attribut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height="100%"

qui ne fonctionne pas avec un 100% en hauteur sans utiliser le javascript dont le résultat ne donne rien dans mon cas.

Donc, ma seule alternative est include() en PHP mais en version AJAX.

Mon fichier appelé utilise des paramètre dans son URL (pagination).

**RunCodePhp** · 18/02/2012, 11h42

C'est pour cela que je voulais utiliser un iframe.

Bien que cela fonctionne, cela reste une technique très ancienne car à l'époque on n'avait pas d'autre choix, l'Ajax n'existait pas encore, ou était méconnue.

L'Ajax est depuis le digne successeur pour générer/varier du contenue partiel dans le corps d'une page.

Le gros inconvénient d'une iframe, c'est que son contenu ne fait pas partie de la page qui contient le iframe.
La page contient juste une balise iframe, autant dire rien (c'est loin d'être un détail).
Le contenu du iframe est une toute autre page Web, cela à part entière (doctype, title, body, etc ...).
Visuellement, c'est une page Web dans une autre page Web.

Si on compte faire référencer le contenu de cette 2ème page (l'URL du iframe), il faudra faire quelque chose d'autre à part.
Bref, ... les problèmes s'enchainent les uns après les autres pour tenter de rendre les choses pertinentes pour un moteur de recherche.
C'est la croix et la bannière au final.
C'est pour cette raison que les iframe tout comme les framset ont été abandonnés, de même que la W3C ne les recommande pas.

Les gros avantage de l'Ajax (à condition de le faire correctement) c'est déjà de pouvoir modifier une partie du contenu d'une page en mode asynchrone.
Mais surtout, les contenus se trouvant dans 1 seule et même page, leur contenus pourront être récupérés par les moteurs de recherche, donc être référencés.

En faite, le mode asynchrone sera pour les internautes, car ceci sera déclenché par du JS au départ, et pour les moteurs de recherches, ce sera un mode classique, c'est à dire un rechargement de la page, car ces derniers n'interprètent pas le JS (du moins pas encore).

Pour bien vérifier que cela soit fonctionnel, suffit de désactiver JS, et suivre les liens, et voir si les contenus varient bien selon ce qui est demandé.

Pour ton problème de hauteur, par moment il est bon de faire des compromis, surtout si on remarque que cela est lié à une certaine non compatibilité des navigateurs.
Ceci dit, si tu n'opte plus pour une iframe, théoriquement il ne devrait plus avoir de problème, non ?

jQuery permet de rajouter quelques code pour éviter certains conflits.
Cependant, il me semble qu'il n'y a pas de conflit entre du code JS pure et jQuery, mais il peut avoir des conflit entre jQuery et un autre FrameWork JS, comme Prototype.

Tout ça sauf erreur.

**dancom5** · 18/02/2012, 12h06

C'est mon fichier categories.php que je veux inclure dans une page ayant déjà du contenu et le fait de cliqué sur la pagination de categories.php, ça recharge tout la page hôte. C'est un peu désagréable pour le visiteur.

Donc, faut que la page hôte ne se recharge pas mais seulement la partie categories.php. Les iframes me permettait ça.

Donc, include() en ajax serait une bonne chose. Je connait rien en ajax.

**RunCodePhp** · 18/02/2012, 12h59

Donc, include() en ajax serait une bonne chose. Je connait rien en ajax.

Il n'y aura pas d'include().
L'ajax c'est au départ du Javascript.

Il me semblait que tu faisais déjà du code JS, donc tu maitriserais en partie ce langage.
Si tu le maitrise, tu ne devrais pas avoir de difficulté à faire de l'Ajax, il existe d'innombrables docs, tutos, tu auras aucun mal à trouver des infos, exemples de codes, etc ...

Si tu prends cette voie là, utiliser un FrameWork JS c'est théoriquement plus simple.
jQuery est assez populaire, (j'ai opté pour celui-ci), là aussi il existe d'innombrables tutos.

Mise à part ça, je n'ai fait que t'avertir des problèmes liés aux iframe, au cas où tu ne le saurais pas.
Maintenant, c'est à toi de voir, toi seul peu juger si c'est mieux ou pas, si par exemple ça te prendrais trop de temps à maitriser l'Ajax, etc, etc ...

Est-ce si problématique que ça de laisser les choses en l'état, c'est à dire sans iframe, donc tout en rechargement.
Puis te laisser le temps de faire des essais (à part) pour maitriser l'Ajax afin de l'exploiter/l'intégrer plus tard ici ?
Cette page est elle si lourde à être rechargée ? Temps trop long ?

**dancom5** · 18/02/2012, 13h12

Le Javascript n'est pas mon fort quoi que j'aime bien l'utiliser mais pas autant que PHP et Mysql que je maitrise plutôt bien.

Mon include est situé en milieu de page à droite (c'est le fichier cat.php) et dès que je fais suivant ou si je clique sur un no de page, c'est tout le site qui se recharge et je dois me repositionner là où j'étais dans ma page.

Si j'ai beaucoup de texte avant mon include, je dois scroller pour voir mon contenu de l'include à chaque fois que je fais suivant ...

Je veux juste que ce soit le contenu de mon include qui se recharge.

**RunCodePhp** · 18/02/2012, 13h25

Mon include est situé en milieu de page à droite (c'est le fichier cat.php) et dès que je fais suivant ou si je clique sur un no de page, c'est tout le site qui se recharge et je dois me repositionner là où j'étais dans ma page.

Alors pour ça il faut utiliser des ancres (anchors).

Je veux juste que ce soit le contenu de mon include qui se recharge.

Ca on l'a bien compris, mais ce n'est pas de ma faute si les choses sont plus longues ou/et plus compliquées à faire qu'à le dire.

**omdafer** · 18/02/2012, 17h43

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
      $(#boutonid').click(function(){
            var indexpage = $("#idInputIndexPage").val();
            $.post("cat.php", {NomVariablePhp: indexpage}, function(data){
                  $("#idDivContenantCat").empty().append(data);
            });
            return false;   
      });
});
</script>

la variable data récupere tout ce qui doit être affiché, donc ce qu'il y a en echo ou en dehors des balises php comme d'habitude

Et en début de ton cat.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
extract($_POST);
...
?>

**omdafer** · 18/02/2012, 17h46

Et bonjour,
désolè précipité de repondre.

Ne pas oublier d'appeler le librairie jquery (dispo sur le net) avant le script.

**dancom5** · 19/02/2012, 14h12

Bonjour omdafer,

Merci pour l'info.

j'ai pas d'éléments $_POST puisque je n'ai pas de formulaire dans mon script. Le fichier cat.php est juste de l'affichage de ma bdd.

C'est ceci que je doit placer dans un site :
http://www.developpez.net/forums/d11...-meme-fichier/

Plus précisément :
http://www.developpez.net/forums/att...-40m-26s.jpeg/

Pour les ancres, RunCodePhp, ça ne fonctionne pas. Ça va appeler directement le fichier et me sortir de mon fichier hôte.

Merci, tout de même

**RunCodePhp** · 20/02/2012, 09h36

j'ai pas d'éléments $_POST puisque je n'ai pas de formulaire dans mon script. Le fichier cat.php est juste de l'affichage de ma bdd.

C'est que tu n'aurais pas compris le principe d'Ajax.

En 1er c'est : on intègre un code JS (ajax) dans notre page où on souhaite qu'une partie soit modifiée (un bloc par exemple) lors d'un clic sur un lien par exemple.
L'Ajax (selon cet exemple) sera alors déclenché au clic du lien (ou d'autres liens).

Cet Ajax se chargera de lancer une requête HTTP vers notre serveur, vers un fichier bien déterminé (un fichier Php), qui lui se chargera de retourner du contenu, des articles d'une catégorie et d'une page (pagination) par exemple.
Donc cet Ajax va recevoir le contenu (au bout d'un certain temps) : les articles.
Il ne restera alors qu'à remplacer le contenu actuel par celui récupéré.

En Ajax, il est permis de faire 4 choses bien distinct :
- De lancer cette requête HTTP en mode asynchrone ou synchrone. asynchrone : sans recharger la page, synchrone : la page sera rechargée.
- De lancer cette requête HTTP en GET ou en POST (donc indépendamment de l'origine de son déclenchement : lien ou formulaire, voir n'importe quel élément HTML).

Si on lance une requête Ajax en POST, la page interrogée (genre recup_articles.php) recevra les données en paramètre en POST.

Qu'est ce qu'il faut comprendre aussi ?
Que le lien qui est à l'origine du déclenchement de cet Ajax devra être désactivé en JS pour éviter de recharger l'Ajax.
C'est ce code : return false; (dans l'exemple de code).
Cela veut dire que :
- un internaute où Javascript est activé, c'est une requête Ajax en asynchrone qui sera exécutée (donc sans rechargement de page)
- Un internaute où Javascript sera désactivé OU un moteur de recherche suivant le lien (un moteur de recherche n'interprète pas JS) la page sera rechargée.
Donc tout fonctionnera quelque soit le cas de figure.

Cependant, je n'ai pas compris le but de ce code là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var indexpage = $("#idInputIndexPage").val();

Il me semble qu'il faudrait récupérer le contenu de l'attribut href du lien cliqué.
Quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var indexpage = $(this).attr("href");

Encore que, il faudrait juste récupérer les paramètres et non l'intégralité du lien.
Ceci dit, comme on est pas sûr que tu comptes faire cela en Ajax, c'est un peu mettre la charrue avant les boeufs.

Pour les ancres, ça ne fonctionne pas. Ça va appeler directement le fichier et me sortir de mon fichier hôte.

J'ai pas compris.
Qu'est ce que tu appel "fichier hote" ?

A mon sens il serait bon de faire le point, car on ne sait pas ce que tu compte faire exactement.
Il me semble que pour le moment c'est l'ensemble de cette page qui est rechargée (est-ce toujours le cas.
Mais tu aurais opté pour intégrer une iframe (voire plusieurs).
Ou peut être changeras tu d'avis pour faire ça en Ajax.

Dans tous les cas mettre du code serait bon, et expliquer peut être mieux ton problème.

**dancom5** · 20/02/2012, 15h24

Bonjour.

Je voulais dire par "hôte" fichier parent. Mon inclusion est à la ligne 48, il fonctionne bien. Sauf que, lorsque ma page aura plus d'éléments dans cette portion, chaque fois que je vais faire suivant, c'est toute la page qui se rafraichira; je veux éviter ça.

Mes connaissance en AJAX sont null et le javascript minimales. Je vais voir si je peux appliquer le code de omdafer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php 
session_start();
 
include_once('./header.php');
 
$left_title ="Gauche";
 
$left_texts = "
  <strong>TITRE DU SUJET</strong>
  <p>du texte et images</p>
  <hr>
  <strong>TITRE DU SUJET</strong>
  <p>du texte et images</p>
  <hr>
"; 
 
$right_title ="Droite";
 
$right_texts = "
  <strong>TITRE DU SUJET</strong>
  <p>du texte et images</p>
  <hr>
  <strong>TITRE DU SUJET</strong>
  <p>du texte et images</p>
  <hr>
"; 
 
include_once('./header.php');
?>
 
  <!-- gauche -->
  <!--[if lte IE 7]><table id="msie" summary="Layout for IE7 and under only"><tr><td class="c1"><![endif]-->
  <div class="columns" id="c1">
    <h1 class="topper" style="text-align:right;margin-bottom:2em"><?php echo $left_title; ?></h1>
      <?php echo $left_texts; ?>
  </div><!--c1-->
 
  <!-- droite -->
  <!--[if lte IE 7]></td><td class="c2"><![endif]-->
  <div class="columns" id="c2">
    <h1 class="topper" style="text-align:left;margin-bottom:2em"><div class="barre"></div>
      <?php echo $right_title; ?>
    </h1>
    <div class="colc">
      <?php echo $right_texts; ?>
 
    </div>
      <?php include('cat.php'); //AJAX ?> 
 
</div><!--c2-->
 
<?php include_once('./footer.php'); ?>

**dancom5** · 20/02/2012, 15h48

J'ai commenté mon inclusion pour le désactiver et j'ai mis le code de omdafer avec la ligne modifié de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var indexpage = $(this).attr("href");

puis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

extract($_POST);

dans mon fichier cat.php rien se passe, aucun affichage.

Si j'ajoute la librairie que j'ai déjà :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
		<!--background-->
    <script type="text/javascript" src="./include/jquery.min.js"></script>
		<script type="text/javascript" src="./include/jquery.fullbg.min.js"></script>
 
		<!--menu-->
    <script type="text/javascript" src="./include/jquery.min.js"></script>
		<script type="text/javascript" src="./include/gooeymenu.js"></script>

ça décale toute ma page vers les bas. Mais, j'ai pas plus d'affichage de mon fichier cat.php

dans mon index.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 
 
<script type="text/javascript">
$(document).ready(function(){
      $(#boutonid').click(function(){
            var indexpage = $(this).attr("href");
            $.post("cat.php", {NomVariablePhp: indexpage}, function(data){
                  $("#idDivContenantCat").empty().append(data);
            });
            return false;   
      });
});
</script>

**RunCodePhp** · 20/02/2012, 20h13

As tu d'abord compris le fonctionnement de l'Ajax ?
As tu fais quelques essais basiques pour voir comment cela s'intègre, communique/interagi, etc ...
Donc avec aucun code annexe potentiellement perturbateur.
Histoire d'éviter de faire du copier coller sans comprendre, sinon ça ne sert à rien.

dans mon fichier cat.php rien se passe, aucun affichage.

Il ne se passe rien dans le fichier cat.php, du moins on ne visualisera rien (à moins d'exploiter quelque chose comme Firebug).
Le cat.php sert (normalement) à renvoyer du contenu à la page principale (le code Ajax).

Essai un truc simple d'abord dans ce genre là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
    <title>Un essai</title>
 
<!-- Importer jQuery ici -->
 
<script type="text/javascript">
$(document).ready(function() {
 
$("#id_lien").click(function() {
    $.ajax({
        type: "POST",
        url: "cat.php.php",
        data: "param1=toto",
        success: function(msg) {
            alert( "Ok : " + msg);
            return false;
        }
    });
 
});
 
});
</script>
</head>
<body>
 
<div>
    <a id="id_lien" href="#">Un essai</a>
</div>
</body>
</html>

Et dans cat.php (ou autre fichier pour essai) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
if (isset($_POST['param1']) && !empty($_POST['param1'])) {
    echo 'param1 obtenu : '.$_POST['param1'];
}
else {
    echo 'Erreur !';
}
?>

Le principe de base est là, il faudrait déjà faire fonctionner ça.
(consulte le forum jQuery au besoin).

**dancom5** · 21/02/2012, 06h52

Afin de mieux comprendre l'ajax et je jquery, je vais mettre du temps pour me familiariser avec ces sujets.

J'ai trouvé une manière par de petits exemples pour m'aider.

Genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script type="text/javascript">
		$(window).load(function() {
		 // executes when complete page is fully loaded, including all frames, objects and images
		 alert("window is loaded");
		});
</script>

Je fais comme j'ai fait avec PHP et MYSQL.

Je vais revenir sur ce poste un peu plus tard. Merci pour les tuyaux, ça m'a donné une piste.

A+

Calculer le nombre px en hauteur d'un page [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager