Charger une page php ou html dans un div

4/5 (128 avis)

Snippet vu 104 034 fois - Téléchargée 28 fois

Commenter

Contenu du snippet

permet de charger une page html dans un div
permet de ne pas utliser les frames

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>ricardo-test</title>

<script type="text/javascript">
function envoieRequete(url,id)
{
	var xhr_object = null;
	var position = id;
	   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
	  else
	    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 

	// On ouvre la requete vers la page désirée
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
	if ( xhr_object.readyState == 4 )
	{
		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
		document.getElementById(position).innerHTML = xhr_object.responseText;
	}
	}
	// dans le cas du get
	xhr_object.send(null);

}
</script>

<style type="text/css">
body 
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin:0;
padding: 0;
}

#header 
{
height: 75px;
background-color: #99CCCC;
}

#conteneur 
{
position: absolute;
width: 100%;
height:100%;
background-color:#D3D3D3;
}

#centre 
{
background-color:#9999CC;
margin-left: 150px;
}

#gauche
{
position: absolute;
height: 750px;
background-color:  #00CED1;
width: 150px;
}

</style>
</head>

<body>

<div id="conteneur">
	  <div id="header">
	  </div>
	  <div id="gauche">
	  <a href="#" onclick="envoieRequete('bande.html','header');" >test</a>
	  <a href="#" onclick="envoieRequete('menu.html','centre');" >test2</a>
	  </div>
	  <div id="centre">
	  </div>
</div>
</body>
</html>

A voir également

Ajouter un commentaire Commentaires
cs_robinou59 Messages postés 2 Date d'inscription vendredi 5 décembre 2008 Statut Membre Dernière intervention 4 décembre 2010
4 déc. 2010 à 14:47
Bonjour,
Merci pour votre script il ma vraiment aidé mais je me pose tout de même une petite question comment faire pour que les accents s'affiche et non un petit carré a leur place ? Merci d'avance
MissArmande Messages postés 5 Date d'inscription vendredi 19 mars 2010 Statut Membre Dernière intervention 16 avril 2010
15 avril 2010 à 11:57
Bonjour à tous,

Le code fonctionne très bien, c'est exactement ce dont j'avais besoin, merci Atlante34.
Cependant, en plus d'afficher une page dans une div choisie, j'aimerais faire un scroll automatique vers une ancre de cette page (c'est-à-dire que, dans ma div, l'ancre située dans la page appelée soit en haut du cadre).

En utilisant les propriétés offsetTop et scrollTo, j'arrive presque au résultat voulu, MAIS je bute sur un détail: je n'arrive pas à récupérer l'offsetTop absolu sur la page (en incluant les parents...). Mon ancre se retrouve en haut de ma page, et non pas en haut de ma div.
Je n'arrive pas à integrer la fonction de getOffset incluant les positions des parents, et j'ai essayé par tous les moyens que j'ai pu imaginer avec mes faibles connaissances en js.

Pour l'instant, j'ai le code où j'ai intégré l'offsetTop de mon ancre et un scrollTo cet offset:

function envoieRequeteC(url,id,ancre)
{
var xhr_object = null;
var position = id;
var hauteur = ancre;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function()
{
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
document.getElementById(position).scrollTop = document.getElementById(hauteur).offsetTop;
}
}
// dans le cas du get
xhr_object.send(null);

}

mais je n'arrive pas à intégrer la fonction de calcul d'offsetTop absolu:
function getOffset(obj) {
var offsetTop = obj.offsetTop;
while ((obj = obj.offsetParent )!=null) {
offsetTop += obj.offsetTop;
}
return [offsetTop];
}
ni en appelant la fonction à l'intérieur de ma fonction, ni en l'intégrant directement dans ma fonction.

Quelqu'un peut-il m'aider?
Merci d'avance.
120120 Messages postés 5 Date d'inscription lundi 28 mars 2005 Statut Membre Dernière intervention 6 janvier 2010
6 janv. 2010 à 06:17
Bonjour,

Voici une autre approche :

http://www.phpcs.com/codes/RAFRAICHIR-PLUSIEURS-DIV-CLIC-AJAX_51077.aspx

Il s'agit d'une classe php qui permet de charger de manière dynamique PLUSIEURS liens dans PLUSIEURS DIV d'une page en un seul clic (en AJAX).

Bonne journée
flk974 Messages postés 5 Date d'inscription vendredi 4 avril 2008 Statut Membre Dernière intervention 9 décembre 2009
9 déc. 2009 à 02:48
J'ai modifié le code pour pouvoir récupéré le contenu d'une page web
pour plus information.
http://www.javascriptfr.com/codes/CHARGER-PAGE-WEB-DANS-DIV_50954.aspx
ibaom Messages postés 4 Date d'inscription mercredi 9 avril 2008 Statut Membre Dernière intervention 9 janvier 2009
22 sept. 2009 à 17:32
desolé pour le dernier message
quelque chose qui peut interresser des personnes sur cette question:
http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
bon du coup c'est de l'ajax, mais ca permet de garder des élements toujours en place (par exemple un lecteur audio...pour eviter les coupures)
apres ca peut poser des problemes en terme de seo...
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (atlante34)