复制网站结构的正确方法（标题，底部..）答案

【问题标题】：Right way of duplicating the website's structure (Header, bottom.. )复制网站结构的正确方法（标题，底部..）
【发布时间】：2015-02-21 13:32:12
【问题描述】：

我使用 html 和 javascript 构建 my website（我无法访问 php），问题是，与大多数网站一样，它包含一个标题和一个底部，在所有页面中都是相同的。

对我来说，最简单的解决方案是创建一个 javascript，使用 document.write() 插入 html 内容。

所以我的html页面的内容是这样的：

<head>
   non relevant code
</head>

<script type="text/javascript" src="-javascript/websites_top.js"></script>


 Page content..

<script type="text/javascript" src="-javascript/websites_bottom.js"></script>

这个原理很好用，但是我意识到当内容需要一些时间来加载时会有一个烦人的问题..

问题：

网站结构如下：

+------------------+
|    MENU          |
+----+--------+----+
|td1 |  td2   |td3 |    
|    |        |    |
|    |        |    |
+----+--------+----+
|    Bottom        |
+------------------+

所以websites_top.js：结束于<td> (td2)，而websites_bottom.js 开始于</td> (td2)

问题是当html页面的内容需要一些时间加载时，网站显示如下：

+-------------+
|   MENU      |
+----+--------+
|td1 |  td2   |    
|    |        |
|    |        |
+----+--------+

直到 html 内容加载完成。（每一页的内容）

我目前正在寻找解决方案，并考虑了以下修复：

1) 混合websites_top.js和websites_bottom.js，使用另一个javascript插入td的html内容。我想避免的选项，因为这意味着所有 html 内容都应该是 javascript 字符串，这很烦人。另外我担心搜索引擎在读取页面内容时会出现问题，因为所有内容都将被写为 javascript 字符串。

2) 进行某种预加载。这样做的问题是我不想预加载网站的所有页面，那我怎么知道用户会点击哪一个呢？

我很难为我的菜单制作脚本，例如：点击预加载，然后发送到页面。

对于编程我认为解决方案 2 更好，但对于用户和网站我认为解决方案 1 更好，因为在页面之间切换时不会出现“滞后”。

你怎么看？有没有更好的方法来做到这一点？（不包括 php 或 shtml，我的“服务器”非常基本）

【问题讨论】：

参考您提到的预加载，您可以通过 css 将主体设置为不可见并使用 window.onload = function() { document.getElementById('myBody').style.display='block' ;}。如果您想使用 php，只需更改提供程序并使用 php - 现在不会花费很多。
删除了我的答案，我没有检查实际站点。我的回答完全基于您上面的陈述“websites_top.js：结束于 (td2)，websites_bottom.js 开始于 (td2)”，这不是有效的 HTML。并假设“完整的新手”意味着“完整的新手”:)
检查stackoverflow.com/questions/17171916/…
@AMartinNo1 很抱歉，我无法更改提供程序，所以 php 不是一个选项。我对您的解决方案感兴趣，问题是用户在加载内容时会看到白屏。我想它仍然是一个解决方案。另一个想法是blocktd的内容并在websites_bottom.js末尾取消阻止它，但我认为没有css代码可以隐藏，并防止加载
哦，好的，没问题。空白页确实是个问题。一种可能的解决方案是在加载完成之前显示加载图标。

标签： javascript html

【解决方案1】：

除了您提出的问题外，您的网页中还有与您的问题相关的其他问题。

为什么内容加载很奇怪？（问题是当html页面的内容加载需要一些时间时，网站显示是这样的：）

我实际上不明白结果是什么。但是，我建议它与document.write() 函数有关。

由于 HTML 文件是从上到下加载的，浏览器会运行任何加载的代码，因此，JS 不是按总程序顺序运行，而是根据加载和运行速度。

解决方案：

我很少看到有人使用document.write 来修改样式网页，因为代码会：

在加载 HTML 时附加 HTML
在网页完全加载时删除网页并覆盖 HTML

它通常仅用于测试，而不用于生产用途。

相反，您应该：

为网页创建一个空框架：编写基本结构。
加载时内容完整，而不是附加内容。
在不覆盖网页的情况下进一步修改。

通过使用document.getElementById("foo").innerHTML = "<p>Bar</p>"，我们可以创建基本效果。

http://jsfiddle.net/zhL2ctqe/

通过将 HTML 的各个部分放在另一个文件中，例如main.html 并通过 Ajax 加载网页。

我更喜欢使用 JQuery，因为它将过程简化为一个简单的函数：

_{jQuery JS：}

$( "#foo" ).load( "bar.html" );

否则：

阅读这样的网站从头开始编写 Ajax：http://www.tizag.com/ajaxTutorial/
使用<iframe> 解决此问题。

问题：

正如您所说，搜索引擎不会正确读取您的页面，因为它们不处理网页上的 JS。 唯一的解决方案是服务器端脚本，例如 PHP 或 ASP。 p>

【讨论】：

我在想你说的，我打算做一些测试，直到我意识到这不是我的问题的原因。我解释一下自己：该网站分为 3。1）顶部，2）每个页面的 html 内容，3）底部（包括第 3 个 td）。当内容需要一些时间来加载时，例如图像，td3 和底部不会显示，直到 2）完成所有内容。正如你所说的 html 是程序性的。所以实际上我认为没有这个问题的唯一方法是在底部加载后添加内容。就像它在解决方案 1) 中提出的一样
如果您想自己查看，可以使用 Tor 访问我的网站。主页底部是用html而不是javascript写的，问题是一样的。
@rsm，这不是真的，我提出的方法叫做Ajax，异步JavaScript 和XML。你应该把代码放在一个地方，当浏览器扫描代码时，它会像打开不同的线程一样加载页面。
@rsm，JS函数不是程序化运行的，但是代码行扫描是程序化的。
你是对的！一旦我在我的主索引上删除了websites_top.js，即使图像仍在加载，所有结构都已加载。谢谢丹尼尔