Q

Comment puis-je diriger du menu de la page principale vers la deuxième page principale avec un jeu de cadres?

2017-05-20 1 views 0 likes

0

J'ai une page principale sans frameset, cette page principale a son propre menu. Puis j'ai une deuxième page "principale" qui est divisée en 4 images (en haut, à gauche, au milieu et à droite) l'image de gauche a le même menu que la page principale, et le contenu cible l'image du milieu. Maintenant, ma question est Comment puis-je faire que dans le menu de la page principale, il vous envoie à la deuxième page principale avec les jeux de cadres, mais avec une autre page au milieu et ainsi de suite pour tous les sujets. Je suis un étudiant de lycée qui fait mon projet final.Comment puis-je diriger du menu de la page principale vers la deuxième page principale avec un jeu de cadres?

2017-05-20 julieta rivera

+0

Ecrivez ce que vous avez déjà fait. –

+0

Une partie de votre code aidera à comprendre ce que vous essayez d'accomplir. Avez-vous réalisé que ** _ La balise n'est pas prise en charge dans HTML5 _ **. [Cochez cette case] (https://www.w3schools.com/tags/tag_frameset.asp) Si vous souhaitez afficher d'autres ID de contenu et leur associer un lien: –

+0

À moins que vous ne travailliez sur un projet existant, ne le faites pas utilisez ''. Il est obsolète, il n'est pas supporté en HTML5, il est incompatible avec le design responsive, et il est même mauvais pour le référencement. – Badacadabra

A

Répondre

0

Si vous devez absolument utiliser HTML4.01, vous pouvez utiliser cette technique avec un peu de javascript "onclick". Répétez la technique pour d'autres cadres. index.html:

 <html> 

    <frameset rows="50%,50%"> 
     <frame src="frame_a.htm"> 
     <frameset cols="30%,30%,30%"> 
     <frame src="frame_b.htm"> 
     <frame id= "framec" > 
     <frame src="frame_d.htm"> 
    </frameset> 
    </frameset> 
    </html>

frame_b.htm:

<html> 
<head> 
</head> 
<body> 
<input type="button" id="english" value="English" onClick="window.parent.document.getElementById('framec').src='english.html';" > 
</body> 
</html>

english.html:

<html> 
<head> 
</head> 
<body> 
    <h2> This is the english Page</h2> 
</body> 

</html>

2017-05-20 22:38:54

0

Mettez une chaîne de requête dans votre URL de votre page principale comme:

<ul> 
    <li><a href="secondpage.html?content=home">Home</a></li> 
    <li><a href="secondpage.html?content=about">About</a></li> 
    <li><a href="secondpage.html?content=contact">Contact</a></li> 
</ul>

Puis pour votre deuxième page principale obtenir les paramètres de chaîne de requête avec javascript et chargez le cadre en conséquence:

<iframe id="frame-content"></iframe> 

<script type="text/javascript"> 
    var content_to_load = getParameterByName("content"); 

    if (content_to_load == "home") { 
     document.getElementById('frame-content').src = "home.html"; 
    } else if (content_to_load == "about") { 
     document.getElementById('frame-content').src = "about.html"; 
    } else if (content_to_load == "contact") { 
     document.getElementById('frame-content').src = "contact.html"; 
    } 

    function getParameterByName(name, url) { 
     if (!url) url = window.location.href; 
     name = name.replace(/[\[\]]/g, "\\$&"); 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
     results = regex.exec(url); 
     if (!results) return null; 
     if (!results[2]) return ''; 
     return results[2].replace(/\+/g, " "); 
    } 
</script>

2017-05-20 22:52:12

0

Eh bien, vous pouvez essayer quelque chose comme ça:

Dans votre page principale (sans frameset):

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Main Page Without Frameset</title> 
</head> 
<body> 
    <h1>Main Page Without Frameset</h1> 
    <ul> 
     <li><a href="index.html?target=google" target="main">Google</a></li> 
     <li><a href="index.html?target=yahoo" target="main">Yahoo</a></li> 
     <li><a href="index.html?target=coursera" target="main">Coursera</a></li> 
    </ul> 
</body> 
</html>

Dans votre frameset

<script> 
    window.onload = function() { 

     var location = window.location.href; 

     var target = getParameterByName('target', location) !== null ? getParameterByName('target', location)+'.html' : 'middle.html'; 

     document.getElementById("main").setAttribute("src", target); 

     console.log('target: ', target); 

     function getParameterByName(_name, _url) { 
      var [name, url] = [_name, _url]; 
      if (!url) url = window.location.href; 
      name = name.replace(/[\[\]]/g, '\\$&'); 
      var regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); 
      var results = regex.exec(url); 
      if (!results) return null; 
      if (!results[2]) return ''; 
      return decodeURIComponent(results[2].replace(/\+/g, ' ')); 
     }; 
    } 
</script> 
<frameset rows="25%,*"> 
    <frame src="top.html"> 
    <frameset cols="25%,*,25%"> 
     <frame src="left.html" name="left"> 
     <frame src="middle.html" name="main" id="main"> 
     <frame src="right.html" name="right"> 
    </frameset> 
</frameset>

Enfin, votre left.html est que ...

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>left</title> 
    <style> 
     body { 
      background: #ff0; 
     } 
    </style> 
</head> 
<body> 
    <h1>Left</h1> 
    <ul> 
     <li><a href="google.html" target="main">Google</a></li> 
     <li><a href="yahoo.html" target="main">Yahoo</a></li> 
     <li><a href="coursera.html" target="main">Coursera</a></li> 
    </ul> 
</body> 
</html>

Que faisons-nous Herer?

D'abord, nous passons une référence pour quelle page nous pouvons ouvrir dans le cadre principal. Après, nous utilisons une fonction d'aide pour capturer cette référence de l'URL. Ensuite, nous analysons cette référence en tant que chaîne de nom de fichier html et la transmettons à notre attribut de cadre "src". C'est tout.

2017-05-20 23:12:51