Html 如何使用框架集从主页面菜单指向第二个主页面？_Html_Css_Href_Frame

Html 如何使用框架集从主页面菜单指向第二个主页面？

html css

Html 如何使用框架集从主页面菜单指向第二个主页面？,html,css,href,frame,Html,Css,Href,Frame,我有一个没有框架集的主页，这个主页有自己的菜单。然后我有一个第二个“主页”，它分为4个框架（顶部、左侧、中部和右侧）。左侧框架与主页具有相同的菜单，其内容指向中间框架。现在我的问题是，我如何从主页菜单中把它发送到第二个主页，带框架集，中间有另一个页面，等等。我是一名高中生，正在做我的最后一个项目。如果你一定要使用HTML4.01，你可以用一点“onclick”javascript来使用这种技术。对更多帧重复该技术。 index.html： <html>

我有一个没有框架集的主页，这个主页有自己的菜单。然后我有一个第二个“主页”，它分为4个框架（顶部、左侧、中部和右侧）。左侧框架与主页具有相同的菜单，其内容指向中间框架。现在我的问题是，我如何从主页菜单中把它发送到第二个主页，带框架集，中间有另一个页面，等等。

我是一名高中生，正在做我的最后一个项目。

如果你一定要使用HTML4.01，你可以用一点“onclick”javascript来使用这种技术。对更多帧重复该技术。 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>


这是英文版

在第一个主页的url中放入一个查询字符串，如：

<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>

然后，对于第二个主页，使用javascript获取查询字符串参数，并相应地加载框架：

<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>


var content_to_load=getParameterByName（“content”）；
如果（内容到加载=“主页”）{
document.getElementById（'frame-content'）.src=“home.html”；
}else if（内容到加载=“关于”）{
document.getElementById（'frame-content'）.src=“about.html”；
}否则如果（内容到加载=“联系人”）{
document.getElementById（'frame-content'）.src=“contact.html”；
}
函数getParameterByName（名称、url）{
如果（！url）url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&）；
var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回结果[2]。替换（/\+/g，”）；
}

好吧，你可以试试这样的方法：

在主页中（无框架集）：

<!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>


没有框架集的主页
没有框架集的主页

在您的框架集中

<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>


window.onload=函数（）{
var location=window.location.href；
var target=getParameterByName（'target'，location）！=null？getParameterByName（'target'，location）+'.html'：'middle.html'；
document.getElementById（“main”）.setAttribute（“src”，target）；
log（'target:'，target）；
函数getParameterByName（\u名称，\u url）{
var[name，url]=[u name，u url]；
如果（！url）url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&'）；
var regex=new RegExp（`[？&]${name}（`（[^&#]*）和|#|$）`）；
var results=regex.exec（url）；
如果（！results）返回null；
如果（！results[2]）返回“”；
返回组件（结果[2]。替换（/\+/g'）；
};
}

最后，您的left.html是…

<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>


左边
身体{
背景：#ff0；
}
左边

我们在这里干什么？

首先，我们传递一个引用，以确定可以在主框架中打开的页面。之后，我们使用一个helper函数从url捕获该引用。然后，我们将此引用解析为html文件名字符串，并将其传递给“src”frame属性。仅此而已。

写下您现在已经完成的工作。您的一些代码将有助于理解您试图实现的目标。您是否意识到HTML5不支持该标记。如果要滚动到其他内容，请使用id并链接到它们：除非您正在处理旧项目，否则不要使用

。它已经过时了，HTML5不支持它，它与响应性设计不兼容，甚至对SEO不利。