一个HTML文件中有多个不同的页面

时间：2011-11-21 11:34:02

标签： html

有没有办法在一个HTML文件中包含多个不同的HTML页面？例如，假设我有一个包含两个页面的网站：

Page 1 : click here for page 2

和

Page 2 : click here for page 1

我可以创建一个HTML文件，为两个页面嵌入简单的静态HTML，但一次只能显示一个吗？我的实际页面当然更复杂的图像，表格和javascript来扩展表格行。我宁愿避免太多的脚本代码。谢谢！

12 个答案:

答案 0 :(得分：30)

嗯，你可以，但你可能只想在同一页面中拥有两组内容，并在它们之间切换。例如：

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>

  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>

  <div id="Page2" style="display:none">
    Content of page 2
    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>

</body>
</html>

（简化的HTML代码，当然应该有doctype等）

答案 1 :(得分：1)

您是否考虑过iframes或隔离您的内容并使用简单的显示/隐藏？

编辑如果您想使用iframe，您可以将page1和page2的内容放在一个html文件中。然后，您可以通过阅读iframe的location.search属性来决定要显示或隐藏的内容。所以你的代码可以是这样的：

对于第1页：iframe.src = "mypage.html?show=1"

对于第2页：iframe.src = "mypage.html?show=2"

现在，当您的iframe加载时，您可以使用location.search.split("=")[1]来获取页码的值并相应地显示内容。 这只是为了表明iframe也可以使用，但使用更复杂比使用div结构的正常show / hide 。

答案 2 :(得分：1)

将所有页面放在不同的div区域

<div style="" id="page1">
First Page Contents
</div>

<div style="display:none" id="page2">
Second Page Contents
</div>

然后使用js脚本来训练您正在查看的内容（例如在标签样式中）以进行导航。要么是aj，要么从ajax获取特定文件的响应（如/pages/page1.html）

var $prehashval = "";
function loop()
{
    if (location.hash.slice(1)!=$prehashval)
        hashChanged();

    $prehashval = location.hash.slice(1);
    setTimeout("loop()", 100);
}
function hashChanged()
{
    var $output;
    switch (location.hash.slice(1))
    {
        case "page1":
            document.getElementById('page1').style.display = "";
            document.getElementById('page2').style.display = "none";
            break;
        case "page2":
            document.getElementById('page1').style.display = "none";
            document.getElementById('page2').style.display = "";
            break;
        default:
            $output = location.hash.slice(1);
    }
}
loop();

答案 3 :(得分：1)

JQuery Mobile具有multipage功能。但我不确定桌面Web应用程序。

答案 4 :(得分：1)

Screen Rec

您可以使用为此构建的Colker，但您必须删除搜索框并搜索功能代码，因为搜索与您打算使用的内容类型不兼容。

网页内容存储在java-script array中，“page”（例如：？page=pagename）网址参数决定了要投放的网页内容。

答案 5 :(得分：0)

从理论上讲，使用data:方案URI和框架是可能的，但这距离实际还有很长的路要走。

您可以通过使用JS隐藏某些内容然后在点击某些内容时以tabtastic的样式显示内容来显示它来伪造它。

答案 6 :(得分：0)

这有点覆盖了一个页面，但是......你可以在HTML中使用iframe。

<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>

而page1.html将是您的基页。您还在制作多个页面，但您的浏览器不会移动。所以，让我们说你的index.html。你有标签，你点击第2页，你的网址不会改变，但页面会。全部在iframe中。唯一不同的是，您也可以查看帧源。

答案 7 :(得分：0)

解决方案1 ​​

一个解决方案，不需要任何JavaScript，只需创建一个页面，其中多个页面只是由大量空格分隔的常规内容。它们可以包装到div容器中，内联样式表可以赋予它们边距：

<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...

<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
     alternative is to use this for the main part of the page also! -->
</div>

<div class="subpage">
</div>

<div class="subpage">
</div>

你得到了照片。每个＆＃34;页面＆＃34;只是一个部分，后面是一个巨大的垂直空间，以便下一个没有显示。

我正在使用此技巧添加消除导航链接＆＃34;消除导航链接＆＃34;进入一个大型文档（长度超过430页的信件大小的PDF格式），我非常希望保留为单个.html文件。我强调这不是一个网站，而是一个文件。

当用户点击文档中与词有关的多个可能主题的关键词超链接时，用户将获得一个小的导航菜单，其中显示了几个主题选项。此菜单显示在看起来像空白浏览器窗口的顶部，因此实际上看起来像一个页面。

菜单不是单独页面的唯一线索是浏览器的垂直滚动条的状态，这在该导航用例中基本上不相关。如果用户注意到并开始滚动，则会显示整个诡计，此时用户将微笑并欣赏不需要解压缩.zip个充满小页面的文件并去寻找{{ 1}}。

解决方案2

实际上可以在HTML中嵌入HTML页面。可以使用index.html属性中稍微模糊的data:网址来完成此操作。作为一个简单的测试，尝试将其粘贴在HTML页面中：

href

在Firefox中，我得到了一个＆＃34;等等＃34;超链接，导航到显示 FOO 标题的页面。 （请注意，我在这里没有完整的HTML页面，只是一个HTML代码段;它只是一个问候世界的例子。）

这种技术的缺点是整个目标页面都在URL中，该URL填充在浏览器的地址输入框中。

如果它很大，它可能遇到一些问题，可能是浏览器特定的;我没有多少经验。

另一个缺点是必须正确转义整个HTML，以便它可以显示为<a href="data:text/html;charset=utf-8,<h3>FOO</h3>">blah</a> 属性的参数。显然，它不能在任何地方包含普通的双引号字符。

第三个缺点是每个这样的链接必须复制href材料，因为它在语义上根本不是链接，而是复制和粘贴嵌入。如果要嵌入的页面很大，那么它不是一个有吸引力的解决方案，并且有很多链接。

答案 8 :(得分：0)

我使用以下技巧来解决同样的问题。好消息是它不需要任何javascript。

CSS：

.body {
     margin: 0em;
}

.page {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -100vw;
    overflow-y: auto;
    z-index: 0;
    background-color: hsl(0,0%,100%);
}

  .page:target {
    left: 0vw;
    z-index: 1;
}

HTML：

<ul>
    <li>Click <a href="#one">here</a> for page 1</li>
    <li>Click <a href="#two">here</a> for page 2</li>
</ul>

<div class="page" id="one">
    Content of page 1 goes here.

    <ul>
        <li><a href="#">Back</a></li>
        <li><a href="#two">Page 2</a></li>
    </ul>
</div>

<div class="page" id="two">
    Content of page 2 goes here.

    <ul style="margin-bottom: 100vh;">
        <li><a href="#">Back</a></li>
        <li><a href="#one">Page 1</a></li>
    </ul>
</div>

查看JSFiddle。

增加了优势：随着您的网址变化，您可以使用它来链接到特定网页。这是方法不会让你做的事情。

希望这有帮助！

答案 9 :(得分：0)

与@ binz-nakama一起使用，这是他的jsfiddle的更新，其中包含少量的javascript。还合并了此very good article on css navigation

update on the jsfiddle 

Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click", 
  function(e){
    Array.from(document.querySelectorAll("a"))
    .map(x => x.classList.remove("active"));
    e.target.classList.add("active");    
  }
));

答案 10 :(得分：0)

假设您有多个页面，其ID为#page1 #page2和#page3。 #page1是起始页的ID。您要做的第一件事是每次加载网页时都重定向到您的起始页。您可以使用javascript执行此操作：

document.location.hash = "#page1";

然后，您要做的下一步就是在文档中放置一些指向不同页面的链接，例如：

<a href="#page2">Click here to get to page 2.</a>

然后，最后，您要确保仅活动页面或目标页面可见，而所有其他页面保持隐藏。为此，您可以在<style>元素中使用以下声明：

<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>

答案 11 :(得分：0)

Twine是一个用于讲述交互式非线性故事的开源工具。 它生成具有多个页面的单个html。 也许这不是适合您的工具，但对于其他正在寻找类似内容的人来说可能很有用。

相关问题
最新问题