用html如何把页面分割成多个文件，由多个文件拼接而成？

摘要：不同平台：pc端静态html分割页面，达到类似php等动态页面的include引入页面效果；手机端单一HTML5页面创建多个页面。

 用html把首页分成三个文件

 

通过load()方法拼接html页面

 

在PHP、JSP等动态页面开发中，页面里引入其它页面只需include()进来就可以实现页面的分离。

如果用HTML，可以实现页面的分割吗？答案是肯定的！

 

两种方法：

一、通过iframe嵌套页面

这个方法不介绍啦，用的很普遍

二、通过AJAX方法load载入页面

通过jQuery的load()方法载入页面

 

假设有四个页面：index.html、page1.html、page2.html、page3.html，其中首页index.html页面由page1、page2、page3.html的三个页面拼接而成。

index.html页面的主要代码（含js）：

<div id="page1"></div> 
<div id="page2"></div> 
<div id="page3"></div> 

$(function(){ 
    $('#page1').load('page1.html'); 
    $('#page2').load('page2.html'); 
    $('#page3').load('page3.html'); 
}) 

jquery的load()方法：载入远程 HTML 文件代码并插入至 DOM 中，默认使用GET方式

load(url,data,callback)

参数说明：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

 

page1.html页面的主要代码：

<h1 style="border:1px solid red; width:498px; height:40px; line-height:40px; text-align:center; 
background-color:#ddd">我是页面1</h1> 

page2.html页面的主要代码：

<h1 style="float:left;border:1px solid red; width:248px; height:140px; text-align:center; 
background-color:#ddd">我是页面2</h1> 

page3.html页面的主要代码：

<h1 style="float:left;border:1px solid red; width:248px; height:140px; text-align:center; 
background-color:#eee">我是页面3</h1> 

 

重要说明

通过load()方法载入的页面，需要控制好css样式，这样才能达到完整的页面显示效果。

可以先在一个页面里写好html+css，然后再分离出去，最后用load()载入进来即可！

另外，通过js追加进来的DOM结构，对SEO（搜索引擎优化）有影响，类似百度蜘蛛是无法抓取的！一般情况下不到万不得已的时候，不推荐使用。

 

移动端单一HTML创建多个页面的方法

可能你想要的不是以上这种效果，而是基于移动端的。比如基于移动框架jquery.mobile开发的，那么在单一 HTML 文件中创建多个页面的方法：

<div data-role="page" id="pageone"> 
  <div data-role="content"> 
    <a href="#pagetwo">转到页面二</a> 
  </div> 
</div> 
 
<div data-role="page" id="pagetwo"> 
  <div data-role="content"> 
    <a href="#pageone">转到页面一</a> 
  </div> 
</div> 

注意属性data-role="page"的元素要与a链接中的锚点名称一致！这样就能实现一个HTML里切换多个页面啦！

 

---

原创文章转载请注明出处！原文链接：http://www.exp99.com/fangan_f2e/qianduanfangan_112.html