Frameset et lien multiple

bm · 11/07/2018, 17h00

Bonjour ,

Je cherche un moyen pour changer 4 frameset différentes ( url : 1,2,3,4 ) avec un lien commun.

C'est l'emboitement des frames qui pose un target different et ensuite comment activer 1 url par
target avec un seul click .

A+ pour des conseils

Nom : fram.jpg
Affichages : 120
Taille : 27,8 Ko

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<li><a href="#" onclick="action7();">action</a></li>
 
<script type="text/javascript">
function action7() {
      alert('casper'); 
      top.frames['page7'].location.href = "http://google.fr";
 
 
};

Pas de résultat avec le code au dessus
La frame : page7 est ciblé mais sans le contenu "http://google.fr"

**eleydet** · 12/07/2018, 09h22

Bonjour,

frameset... est obsolète!?
https://developer.mozilla.org/fr/doc...ement/frameset

bm · 23/07/2018, 10h19

eleydet :

Bien , mais comment se partage iframe pour obtenir 4 pages réduites ?

**Watilin** · 23/07/2018, 12h00

Une navigation basée sur des iframes posera les mêmes problèmes qu’avec un frameset. Essentiellement, ces problèmes sont des obstacles à l’accessibilité de la page (à commencer par la navigation au clavier), qui sont la principale raison pour laquelle frameset a été déprécié.

Une solution plus moderne serait d’avoir la même page divisée en 4 <div> dont tu changes le contenu via ajax, par exemple avec la méthode .load() de jQuery.

Par curiosité : pourquoi as-tu besoin d’afficher 4 fois le même contenu ?

bm · 23/07/2018, 14h04

Nom : pic_tot.jpg
Affichages : 86
Taille : 55,7 Ko

C'est une comparaison d'un profil de température
1-2-3-4 ( 2015-16-17-18 )

Réchauffement climatique

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Projects:</b>
<ol id="new-projects"></ol>
 
<script>
var jour = 8;
$( "#new-projects" ).load( "cd1.htm" );
</script>
 
</body>
</html>

Pas concluant ce stript, rien ne s'affiche et cd1.htm donne bien un graphique ...

**Watilin** · 23/07/2018, 16h05

Ah d’accord, ce n’est pas 4 fois le même contenu, j’avais mal compris.

Tu as une raison particulière d’utiliser la version 1.10 de jQuery ? La dernière version en date est 3.3.1.

J’ai plusieurs hypothèses pour expliquer pourquoi ton script n’affiche rien.

1. Un problème d’apparence lié à la balise <ol>. Normalement tu devrais quand même voir quelque chose, même déformé, mais bon on ne sait jamais. Essaye avec <div> à la place.

2. Un problème de chemin. Assure-toi que cd1.htm est dans le même dossier que la page depuis laquelle tu testes.

3. Un problème de requête : si tu testes en local (protocole file:///) ou si en réalité tu demandes, sans l’avoir montré dans ton code, un fichier qui se trouve sur un serveur tiers, la requête .load() n’a pas lieu car la politique de même origine l’interdit.

bm · 23/07/2018, 17h00

Code :

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

$( "#new-projects" ).load( "cd1.htm" );

Est valable pour un fichier txt

Frame et Iframe , pas vraiment de différence en localhost
C'est aller chercher du content externe qui est bloqué par
des règles de sécurité ... ou de protection des data ...

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
<!DOCTYPE html>
<html>
<body>
 
<p>Click the button to change the location of the first iframe element (index 0).</p>
 
<button onclick="myFunction1()">Try it</button>
<br><br>
<button onclick="myFunction2()">Try it</button>
<br><br>
 
<iframe src="https://www.w3schools.com" NAME="page8"></iframe>
<iframe src="https://www.w3schools.com" NAME="page9"></iframe>
 
 
 
<script>
        
function myFunction1() {
    top.frames['page8'].location.href = "https://www.w3schools.com/jsref/";
}
function myFunction2() {
    top.frames['page9'].location.href = "http://localhost/";
}
 
</script>
 
</body>
</html>

Ci-dessus l'affichage de page8 est bloqué et
page9 est affiché

**eleydet** · 23/07/2018, 23h12

Bonsoir,

Il s'agit probablement d'un problème de contenu mixte.
https://developer.mozilla.org/fr/doc...mixte_site_web

En remarque, il est aussi possible d'écrire :

Code html :

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

1
2
3
4
5
6
7
8
9
10
...
<iframe src="https://www.w3schools.com" id="page8"></iframe>
<iframe src="https://www.w3schools.com" id="page9"></iframe>
...
<script>
        
function myFunction1() {
    document.getElementById('page8').src = "https://www.w3schools.com/jsref/";
}
...

bm · 24/07/2018, 14h55

Code :

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

1
2
3
4
5
6
7
function myFunction1() {
    //top.frames['page8'].location.href = "https://www.w3schools.com/jsref/";
    document.getElementById('page8').src = "http://www.lefigaro.fr/";
}
function myFunction2() {
    top.frames['page9'].location.href = "http://localhost/";
}

Les diffuseurs de news ne bloquent pas les Iframe avec l'entête http://

**Watilin** · 24/07/2018, 16h34

Envoyé par bm

Les diffuseurs de news ne bloquent pas les Iframe avec l'entête http://

Ce n’est pas complètement exact. En fait, c’est w3schools qui envoie un en-tête X-Frame-Options: SAMEORIGIN. Voir https://developer.mozilla.org/fr/doc...-Frame-Options.

bm · 24/07/2018, 18h06

view-source:https://www.w3schools.com/

X-Frame n'est pas visible

**Watilin** · 24/07/2018, 21h28

C’est un en-tête HTTP. On les voit dans l’onglet réseau de la console.

bm · 24/07/2018, 22h37

C’est un en-tête HTTP. On les voit dans l’onglet réseau de la console.

Quelle console et dans quel navigateur ?

**Watilin** · 24/07/2018, 23h16

Le panneau d’outils de dev qui s’ouvre avec la touche F12. L’onglet s’appelle réseau ou network ou un truc comme ça.
Si l’outil réseau est actif lors du chargement de la page, tu verras apparaître une requête GET avec l’adresse de la page. Si tu cliques dessus tu peux voir les détails de la requête, dont les en-têtes HTTP.

Frameset et lien multiple

JavaScript

Discussions similaires

Partager

Partager