Question

我使用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更好，因为没有＆＃34;滞后＆＃34;在页面之间切换时。

你怎么看？有没有更好的方法呢？（没有php或shtml包括，我的＆＃34;服务器＆＃34;它非常基本）

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

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

1 个答案: