将一个页面分成多个html文件(静态html分割页面) | 您所在的位置:网站首页 › 网页设计怎么拆分 › 将一个页面分成多个html文件(静态html分割页面) |
静态html分割页面,达到类似PHP等动态页面的include引入页面效果。 用html把首页分成三个文件 在PHP、JSP等动态页面开发中,页面里引入其它页面只需include()进来就可以实现页面的分离。 如果用HTML,也是可以实现页面的分割的。 两种方法: 一、通过iframe嵌套页面 二、通过AJAX方法load载入页面 通过jQuery的load()方法载入页面: 假设有四个页面:index.html、header.html、content.html、footer.html,其中首页index.html页面是由其他三个页面拼接而成的。 index.html页面的主要代码(含js): $(function(){ $('#header').load('header.html'); $('#content').load('content.html'); $('#footer').load('footer.html'); }) jQuery的load()方法:载入远程HTML文件代码并插入至DOM中,默认使用GET方式。load(url,data,callback) 参数说明: url:待加载的HTML网页网址 data:发送至服务器的key / value数据。在jQuery 1.3中也可以接受一个字符串了。 callback:载入成功时回调函数 重要说明: 通过load()方法载入的页面,需要控制好css样式,这样才能达到完整的页面显示效果。 可以先在一个页面里写好html+css,然后再分离出去,最后用load()载入进来即可。 另外,通过js追加进来的DOM结构,对SEO有影响,类似百度爬虫是无法抓取的!一般情况下不到万不得已的时候,不推荐使用。
移动端单一html创建多个页面的方法 基于移动端的,比如基于移动框架jquery.mobile开发的,那么在单一HTML文件中创建多个页面的方法: 转到页面二 转到页面一 注意属性data-role="page"的元素要与a链接中的锚点名称一致!这样就能实现一个HTML里切换多个页面了。 |
CopyRight 2018-2019 实验室设备网 版权所有 |