由于业务情况,不想写太多重复的页面,就想着通过类似组件的形式实现html引入html,最终找到include.js,通过<include src="html文件路径"></include>引入,发现还挺好用的,但是include标签引入的文件,再进行include标签引入的话就会有问题,引入不了。
比如一个cover.html
<include src="cover.html"></include>
cover.html
<div>
<h1>我是cover</h1>
<include src="child.html"></include>
</div>
结果child.html没有被加载进来,然后就外面通过include标签引入cover.html,include标签里还想引入的话,通过
$('.child').load('child.html');
引入,结果是ok的,但发现点击页面刷新时又不行了,主要还是因为js先执行了,include的标签才加载;
于是通过setTimeout异步100毫秒可以了,但又想到如果网络比较慢时加setTimeout异步应该也会导致这种情况的出现,于是浏览器调慢加载的请求速度,果不其然又出现了没能加载到child.html;
想了想这应该是跟include.js源码里面的执行有关,看了include.js的源码后发现果然是的,
window.onload = function() { new Include39485748323().replaceIncludeElements(); }
它是等标签加载完后进行的自执行,这里包括了加载script标签,于是我就想只要dom结构加载完执行就可以,于是把这段源码改为
$(document).ready(function (){ new Include39485748323().replaceIncludeElements(); })
大功告成。