Charger une page php ou html dans un div

Soyez le premier à donner votre avis sur cette source.

Snippet vu 101 893 fois - Téléchargée 27 fois

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
Messages postés
2
Date d'inscription
vendredi 5 décembre 2008
Statut
Membre
Dernière intervention
4 décembre 2010

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
Messages postés
5
Date d'inscription
vendredi 19 mars 2010
Statut
Membre
Dernière intervention
16 avril 2010

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.
Messages postés
5
Date d'inscription
lundi 28 mars 2005
Statut
Membre
Dernière intervention
6 janvier 2010

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
Messages postés
5
Date d'inscription
vendredi 4 avril 2008
Statut
Membre
Dernière intervention
9 décembre 2009

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
Messages postés
4
Date d'inscription
mercredi 9 avril 2008
Statut
Membre
Dernière intervention
9 janvier 2009

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...
Afficher les 128 commentaires

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)