load() et page d'un sous répertoire avec chemins relatifs

**Couin** · 11/06/2019, 17h23

Hellooooo

Je cale sur un point qui me pose souci.

Prenons par exemple une page index.html à la racine du site avec dedans, un menu en haut, dans lequel chaque bouton permet de charger une page dans une div via la fonction load() :

Voici la fonction :

Code :

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

1
2
3
4
5
<script>
function ouvrir(target,url) {
$( "#" + target ).load( url );
}
</script>

Le bouton :

Code HTML :

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

<a onclick="ahref('content','/contact/index.html')">Contact</a>

Le problème c'est que la page /contact/index.html contient des images dans le répertoire /contact/images/ , le navigateur les cherche directement dans un répertoire /images/ à la racine du site. Evidement il ne les trouve pas.

Bien sur, c'est pareil avec les pages de style etc etc.
Il n’est pas envisageable de réécrire toutes les pages ciblées. J'ai bien tenté en remplaçant la div par un iframe, là ça marche mais impossible de faire un truc potable (qui prenne toute la place dispo sous l’entête menu, qui soit scrollable mais sans scrollbar verticale (car ça fait une deuxième scrollbar avec la principal, et c’est ultra moche).

si quelqu'un a une solution

Merkouin

**Watilin** · 11/06/2019, 20h08

J’ai une idée, ce n’est peut-être pas la meilleure mais voilà ce que je propose. Au lieu d’appeler .load() directement, tu récupères le HTML de la cible avec .ajax() ou .get(). Tu charges le code dans une <div> temporaire pour avoir un arbre DOM. Puis tu parcours tous les éléments ayant un attribut href, src et semblables, et tu transformes les chemins dans chacun de ces attributs pour qu’ils fonctionnent avec la page actuelle. Je ne vois pas de solution plus simple.

**Couin** · 11/06/2019, 20h30

Hello,

Merci pour ta réponse.

Je oense que ca n'ira pas car plusieurs pages que je dois affichr sont aussi en php avec des requetes (formulaire de disques à la demande etc etc eux même avec du JS et AJAX) et également un tchat (Blab Ax).

En effet je ne vois pas de solution simple

**NoSmoking** · 13/06/2019, 16h56

Bonjour,

J'ai bien tenté en remplaçant la div par un iframe, là ça marche mais impossible de faire un truc potable (...)

cela devrait pouvoir se régler via le CSS !

**Couin** · 13/06/2019, 17h40

Hello,

Merci, mais je veux bien une piste

En attendant je suis passé en iframe donc , mais j'ia mis le footer en bas de chaque page que je veux afficher dans l'iframe, ainsi, j'élimine le footer de la page principale (et donc de la grille) , ce qui retire une scrollbar verticale.

En revanche, si la page affichée dans l'iframe est trop longue, la scrollbar apparait (normal), j'ai voulu customiser un peu en cherchant coté css mais à priori il faut webkit scrollbar, qui n'est à priori pas prévu au programme de standardisation chez Firefox ( https://developer.mozilla.org/fr/doc...bkit-scrollbar ) donc fonctionnement aléatoire d'un visiteur à l'autre

**NoSmoking** · 13/06/2019, 19h33

Envoyé par Couin

Merci, mais je veux bien une piste

voici un exemple simple de mise en place d'une <iframe>.

Code html :

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
53
54
55
56
57
58
59
60
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Iframe</title>
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
h1, h2, h3 {
  color: #069;
}
nav {
}
  nav a {
    padding: 0.5em;
    border: 1px solid #ABC;
    text-decoration: none;
    color: #069;
    background-color: #FFF;
  }
  nav a:hover {
    color: #000;
    background-color: #EEE;
  }
iframe {
  display: block;
  width: 100%;
  height: 40em;
  margin: auto;
  border: 1px solid #ABC;
  overflow: hidden;
}
</style>
</head>
<body>
  <main>
    <header>
      <h1>Titre page</h1>
    </header>
    <nav>
      <a target="target" href="https://www.developpez.net/forums/">Index forum DVP</a>
      <a target="target" href="https://www.developpez.net/forums/f9/webmasters-developpement-web/">Forum Web (HTML-CSS)</a>
      <a target="target" href="https://www.developpez.net/forums/f2000/javascript/">Forum Javascript</a>
    </nav>
    <section>
      <h2>Article</h2>
      <iframe  name="target" src="https://www.developpez.net/forums/f9/webmasters-developpement-web/"></iframe>
    </section>
  </main>
</body>
</html>

Nota : si tu dois aller plus loin autant ouvrir une nouvelle discussion sur le forum CSS

load() et page d'un sous répertoire avec chemins relatifs

jQuery

Vue hybride

Discussions similaires

Partager

Partager