如何从主页面菜单指向带框架集的第二个主页面?

时间:2017-05-20 21:43:13

标签: html css href frame

我有一个没有框架集的主页面,这个主页面有自己的菜单。 然后我有一个第二个“主”页面,它分为4帧(顶部,左侧,中间和右侧),左侧框架具有与主页面相同的菜单,以及其目标为中间框架的内容。 现在我的问题是如何从主页面菜单中将它发送到带有框架集的第二个主页面,但中间有另一个页面,依此类推所有主题。 我是一名从事最后项目的高中生。

3 个答案:

答案 0 :(得分:0)

如果你绝对必须使用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>

答案 1 :(得分:0)

将查询字符串放在第一个主页面的网址中,如:

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

答案 2 :(得分:0)

嗯,你可以尝试这样的事情:

在您的主页面中(没有框架集):

f(n) = max( f(n-1), f(n-2)+arr[n] )

在您的框架集中

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

最后,你的left.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>

我们在做什么?

首先,我们传递一个参考,我们可以在主框架中打开哪个页面。之后,我们使用辅助函数从url中捕获此引用。然后,我们将此引用解析为html文件名字符串,并将其传递给我们的“src”frame属性。就是这样。