Discussion :

[Xann_71]

Bonjour,
J'ai l'impression que je n'utilise pas la bonne méthode pour charger des pages web comme je le souhaite.

Voila mon problème, je dois créer plusieurs pages web contenant certains éléments similaires et d'autres différents. La personne pour laquelle je réalise ce travail m'a donc demandée de faire en sorte que seuls les éléments qui différent soient modifiés mais dans la même page.

Il faut insérer des vidéos, des images et des fichier .txt ou .html (ces 2 derniers pour du texte).

pour la vidéo, j'utilise une fonction javascript qui fonctionne
Ainsi lorsque je clic sur un lien, la vidéo est modifier dans le même lecteur, dans la même page, grâce a la modification du contenu de l'objet appelé par le javascript suivant:

Code :

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

1
2
3
4
5
 
function play(filename)
{
     player.url = filename;
}

qui intervient dans le code html suivant:

Code :

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

1
2
3
4
5
6
7
8
 
<object id="player" type="video/x-msvideo" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
	<param name="stretchToFit" value="-1">
</object>
<ul>
	<li><a href="#" onclick="play('video1.asx')">vid&eacute;o 1</a></li>				
	<li><a href="#" onclick="play('video2.asx')">vid&eacute;o 2</a></li>
</ul>

Donc ceci marche parfaitement, mais si j'utilise le même code pour afficher des fichier .txt ou .html, cela ne marche pas de la même façon.
si j'utilise le code html:

Code :

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

1
2
3
 
<object id="player" data="Page 1.html" type="text/html" align="center" width="100%" height="600">
</object>

La page 1 est bien afficher dans ma page principale
Mais si j'utilise ce code et que je l'associe à la fonction js:

Code :

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

1
2
3
4
5
 
function afficher(filename)
{
     player.data = filename;
}

et que je crée les liens:

Code :

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

1
2
3
4
5
 
<ul>
	<li><a href="#" onclick="play('Page 1.html')">Page 1</a></li>				
	<li><a href="#" onclick="play('Page 2.html')">Page 2</a></li>
</ul>

Les pages ne sont cette fois ci pas modifiées lors du clic sur le lien.
Pourquoi?

On m'avais conseillé d'utiliser l'objet AJAX mais je n'y parviens pas, je ne comprend pas comment il marche et je ne comprend pas non plus en quoi celui ci est la solution? A quoi sert il? Je suis aller voir sur différents sites pour essayer de comprendre, y compris sur le cours de css fournit par developpez.net mais j'ai l'impression que part rapport à ce que je veux faire, il permet au mieux de mettre mon texte dans une boite de dialogue alors que ce n'est pas mon souhait.

Quelqu'un peut m'expliquer et m'aider à trouver une solution s'il vous plait?

[E.Bzz]

Bonjour,
sans certiture que ça soit suffisant (mais avec la certitude que ça soit nécessaire), enlève les quotes autour des paramètres dans tes déclarations de fonctions.
Ex :

Code :

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

1
2
3
function play(filename)
...
function afficher(filename)

A+

[Xann_71]

Ah oui pardon^^.
Dans mon code elles n'y étaient pas, je me suis trompé en le recopiant, je n'ai pas fait un copier/coller désolé.

Par contre, on m'a dit qu'une page ne pouvait pas être appelée de cette manière mais pourquoi?
Les vidéos peuvent être appelées comme sa alors pourquoi pas une page?
Et si je fixe une page précise dans le data de ma balise object (comme dans l'un des codes au dessus), elle est chargée alors pourquoi ne pourrait-elle pas l'être avec le code javascript?

[E.Bzz]

Les vidéos peuvent être appelées comme sa alors pourquoi pas une page?

Parce que pour une page, il faut utiliser un iframe (et en modifier l'attribut src) ...

A+

[Xann_71]

Mais pourtant ça fonctionne avec un div.
Et l'iframe n'est pas valide pour les pages accessibles si?
Il me faut des pages accessibles mais si tu me dit que je peux utiliser les iframes, la je t'adore^^. Sa simlifirais trop mon problème.
Mais j'avais cru que sa marchait avec un div voila le code que j'ai par exemple:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>Nom page</title>
		<link rel="stylesheet" media="screen" type="text/css" href="site.css" />
		<script src="site.js" language="Javascript" type="text/javascript">
		</script>
	</head>
 
	<body>
		<div id="header">
			<h1>
				Titre Page
			</h1>
		</div>
		<div id="main">
			<object id="player" data="Page sommaire.txt" type="text/html" width="100%" height="600">
			</object>
		</div>
		<div id="menu">
			<h3>
				Menu
			</h3>
			<ul>
				<li><a href="#" onclick="play('Page sommaire.txt')">page sommaire</a></li>
				<li><a href="#" onclick="play('Page 1.txt')">page 1</a></li>
			</ul>
		</div>
	</body>
 
</html>

Et ma "Page sommaire.txt" est bien affichée dans ma page web, grâce a la balise object dans mon div.
C'est pourquoi je pensais que si l'on peut modifier l'url dans une balise object pour changer de fichier vidéo sans rafraichir la page, on pouvait aussi modifier le data dans une balise object pour changer de fichier texte sans rafraichir la page.

Mais si les iframes sont acceptés pour les pages accessibles, je ferai avec.

[E.Bzz]

Mais si les iframes sont acceptés pour les pages accessibles, je ferai avec.

Qu'appelles-tu "page accessible".
Le pb se pose plutôt pour les pages d'un autre serveur, il me semble ...

A+

[Xann_71]

Ce que j'appelle pages accessibles, ce sont les pages respectant des normes afin que des personnes soufrant d'un handicape physique (comme les aveugles) puissent y avoir accès.
Je crois justement que les iframes ne sont pas autorisés par l'accessibilité car cela est à peu prêt similaire à l'ouverture de plusieurs pages en une seule et certains screen reader ( outil utilisé pour traduire oralement les pages html ) ont du mal à les gérer.
Il y'a aussi l'exemple des "window.open" qui est proscrit et il est déconseillé qu'un lien ouvre une nouvelle fenêtre ou un nouvel onglet.
Il y'a beaucoup d'autres règles et si sa t'intéresse, voici un lien ou tu pourrais en avoir un aperçut:
http://www.la-grange.net/accessibilite/

La plupart des normes du W3C sont basées la dessus
Et si tu veux tester l'accessibilité de tes pages, il y'a aussi ce lien qui te propose différents niveau de test:
http://www.ocawa.com/

Voila. Il me semble que j'ai vu sur la-grange que les frames étaient interdit donc je n'ai pas cherché à les étudier (je ne sais même pas la différence entre un frame et un iframe mis à part le nom^^).

Voila donc un peu de lecture si sa t'intéresse

Sinon quelqu'un connait suffisamment AJAX pour m'expliquer à quoi sert exactement? Si sa peut résoudre mon problème et la signification de la plupart des lignes du code parce que j'ai essayer de m'en servir mais je n'arrive pas à retraduire la moitié des lignes, et le reste je ne sais pas comment les organiser.