1.使用iframe引入HTML文件
很多人都想知道咋办？能不能直接从一个HTML文档里面读出另一个HTML文档？答案是肯定的，而且方法可不少！常见的就是用iframe导入，虽然方便，但是效果可能没那么好。举个例子，你用iframe导入一个外部文件，看似成功了，但其实它外面套着一层边框，看着不太顺眼。再者，如果你不注意的话，可能会发现两个页面的背景颜色不一致，那就更别扭了。要解决这问题，就在被导入的文件（比如import.htm）里也设置成同样的背景色。不过，要是你用的是IE5.5浏览器，可能会碰到透明色的问题，这时候得找找相关文章才能解决。还有个小提示，如果你不希望导入的文件太长导致出现滚动条，可以在import.htm的body标签里加上scroll=no。
2.通过Ajax动态加载HTML内容
除了iframe，咱们还能用个更时髦的办法——Ajax。这玩意儿全名叫做“异步JavaScript和XML”，名字有点吓人，但操作起来其实很简单。说白了，就是用JavaScript在背后悄悄跟服务器交换信息，然后把这些信息动态地加到网页里。这个方法好就好在，网页不用整个刷一遍，用户感觉会舒服很多。而且，你可以只加载你想要的部分，省得把整个网页都拉下来。这样既快又省流量。不过，这个方法也有不足之处，比如说对搜索引擎不太友好，因为它们可能抓不到通过Ajax加载的内容。
3.使用behavior的download方式
还有一个很新鲜又好玩儿的方法——behavior的download模式。咋一听上去像是网上下东西似的，其实也差不多。最简单的解释就是先设定一个behavior，等到需要的时候就立马启动它，让它帮忙下载想要的HTML文件，然后直接展示在眼前的网页上。这样做的好处就是，加载速度快得惊人，用户根本察觉不出页面的变化。而且，这种方法对搜索引擎也特别友好，因为所有内容都是直接展现在页面上的。不过要注意的是，这种方法的兼容性可能会有些问题，不是所有的浏览器都能完全支持。
4.利用HTML5的import属性
现在HTML5火得不行，给我们带来了老多新鲜玩意儿。比如这个import属性，就是让我们能在HTML标签里直接把外部文件拖进来的那种。这操作简直不能再简单了，只要在要导入的地方加个import属性，然后告诉它外部文件在哪儿就行了。这样一来，代码看着清爽，维护起来也省心。而且，作为HTML5的新功能，它在现代浏览器上的表现也是杠杠滴。不过，这个属性并不是所有浏览器都支持，用之前还是先查查浏览器兼容性。
5.通过服务器端包含（SSI）实现
除了在客户端找方法，我们还可以试试看在服务器端解决问题。比如，服务器端包含（SSI）就是个不错的主意。SSI就是ServerSideIncludes，简单说就是在服务器上把内容加进去。这种方法挺棒的地方在于，所有处理都在服务器那边搞定，给客户端省时又省力。而且，由于是服务器干活儿，对搜索引擎也很友好。不过，这方法也有些小瑕疵，比如得依赖服务器支持，要是你的服务器不支持SSI，那就没法用。
6.使用JavaScript的fetchAPI
现在搞Web开发，JavaScript里有个叫fetchAPI的东西特别好用。这个API能上网取数据和文件，包括HTML文档。利用这个功能，你就能把网页上的元素动态更新了。这个API很灵活，你可以自己设定请求方式、头部信息等各种参数。而且，它还支持Promise，处理异步操作就更简单了。但是，fetchAPI也有些小问题，比如它默认不发cookie，要发的话得手动设一下。
7.利用jQuery的load方法
如果你喜欢用jQuery，那load方法就是个好帮手。这个方法能直接从服务器拉取数据，然后塞进你想要的地方。它的优点就是简单，一行代码就能完成任务。另外，由于jQuery这么火爆，它的兼容性也是没得说。但是要记得，load是在服务器那边获取数据，如果你的网页是静态的，可能就不太适用了。
用Web组件的模板和插槽搞事儿
别忘了还有个WebComponents，这可是能帮我们开发可重复利用的定制元素的利器！WebComponents里有两个重要的概念——template和slot。你可以用template来设计模板，再用slot往里面塞东西。这样做的好处就是，页面被拆成了很多小块，每一块都可以单独开发和测试，而且因为是标准化的，所以兼容性和可维护性都很好。但是要注意，现在并不是所有的浏览器都支持WebComponents，所以用之前得看看浏览器是否兼容。
简单说，想从HTML文件里调取别的HTML文件的东西，有好几种办法可选，各有利弊。到底用哪个，得看你实际情况和需要。希望这篇小文对你有所帮助，要是你还有其他妙招儿，千万别藏着掖着。
评论0