21

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

Page 1 : click here for page 2

和

Page 2 : click here for page 1

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

4

12 回答 12

42

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

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

于 2011-11-21T11:48:25.340 回答
2

我对同样的问题使用了以下技巧。好消息是它不需要任何 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。

附加优势：随着您的网址发生变化，您可以使用它链接到特定页面。这是该方法不允许您做的事情。

希望这可以帮助！

于 2017-09-30T13:28:59.783 回答
1

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

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

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

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

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

于 2011-11-21T11:36:48.857 回答
1

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

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

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

然后使用 js 脚本来锻炼您正在查看的内容（例如在主题标签样式中）以进行导航。要么，要么 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();
于 2011-11-21T11:37:43.667 回答
1

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

于 2012-08-08T06:30:48.760 回答
1

这是一种覆盖一页的东西，但是......您可以在 HTML 中使用 iframe。

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

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

于 2013-12-05T03:25:38.480 回答
1

屏幕录制

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

页面内容存储在 ajava-script array中，“ page”（例如： ? page=pagename）URL 参数确定要提供的页面内容。

于 2017-08-13T00:40:30.467 回答
1

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

于 2019-12-13T15:20:30.517 回答
0

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

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

于 2011-11-21T11:35:48.237 回答
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>

你得到图片。每个“页面”只是一个部分，后面跟着大量的垂直空间，因此下一个不会显示。

我正在使用这个技巧将“消歧导航链接”添加到一个大文档中（其字母大小的 PDF 格式超过 430 页），我非常希望将其保留为单个.html文件。我强调这不是一个网站，而是一个文档。

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

菜单不是单独页面的唯一线索是浏览器垂直滚动条的状态，这在此导航用例中基本上无关紧要。如果用户注意到这一点，并开始四处滚动，整个诡计就会显露出来，此时用户会微笑并感谢不需要解压一个.zip充满小页面的文件并去寻找index.html.

解决方案 2

实际上可以在 HTML 中嵌入 HTML 页面。可以使用属性中有些晦涩的data:URL来完成。href作为一个简单的测试，尝试将其粘贴在 HTML 页面中的某个位置：

<a href="data:text/html;charset=utf-8,<h3>FOO</h3>">blah</a>

在 Firefox 中，我得到一个“blah”超链接，它导航到显示FOO标题的页面。（请注意，我这里没有完整的 HTML 页面，只是一个 HTML 片段；它只是一个 hello-world 示例）。

这种技术的缺点是整个目标页面都在 URL 中，它被塞进了浏览器的地址输入框中。

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

另一个缺点是整个 HTML 必须正确转义，以便它可以作为href属性的参数出现。显然，它不能在任何地方包含纯双引号字符。

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

于 2016-06-03T15:34:11.537 回答
0

与 @binz-nakama 一起，这是他的 jsfiddle 的更新，其中包含非常少量的 javascript。还包含了这篇关于 CSS 导航的非常好的文章

更新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");    
  }
));
于 2018-10-02T13:25:41.310 回答
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>
于 2019-06-06T04:20:58.297 回答