html引入html

由于业务情况，不想写太多重复的页面，就想着通过类似组件的形式实现html引入html，最终找到include.js，通过<include src="html文件路径"></include>引入，发现还挺好用的，但是include标签引入的文件，再进行include标签引入的话就会有问题，引入不了。

比如一个cover.html

<include src="cover.html"></include>

cover.html

<div>

<h1>我是cover</h1>

</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();
})

大功告成。

html引入html相关推荐

关于新技术的引入原则 ——从零开始学架构
不以解决实际问题引入的技术都耍流氓. 新技术的引入不是为了证明自己,而是为了解决实际项目中遇到的问题.希望诸位能够控制住自己的心魔. 新技术的引入要求应该是解决的问题大于带来的问题. 再引入新技术,请 ...
在pycharm中无法引入同一目录下的python文件
问题同一目录下存在以下两个python文件: 1. app.py 2. forms.py 现在我希望在app.py中引入forms.py的某个函数,但是出现如下情况: 主要表现在: 函数标红无法自 ...
在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
通俗易懂的Go协程的引入及GMP模型简介
本文根据Golang深入理解GPM模型加之自己的理解整理而来 Go协程的引入及GMP模型一.协程的由来 1. 单进程操作系统 2. 多线程/多进程操作系统 3. 引入协程二.golang对协程的处 ...
将Tensor核心引入标准Fortran
将Tensor核心引入标准Fortran 调优的数学库是从HPC系统提取最终性能的一种简单而可靠的方法.但是,对于寿命长的应用程序或需要在各种平台上运行的应用程序,为每个供应商或库版本调整库调用可能是 ...
CEVA引入新的可配置传感器集线器DSP架
CEVA引入新的可配置传感器集线器DSP架构 CEVA introduces new configurable sensor hub DSP architecture 在一个将多个传感器设计成几乎所有 ...
电子设计搜索引擎引入分析和见解
电子设计搜索引擎引入分析和见解 Electronics Design Search Engine Introduces Analytics and Insights 2020年上半年最受欢迎的组件是什 ...
Android Studio 引入aar文件
1 首先在app下面的lib里面导入aar文件 2 在app下面的build.gradle 里面的android 中填写如下 repositories {flatDir {dir 'libs'}} 3 ...
GlideApp 引入不了问题
使用GlideApp 不用忘记创建 MyAppGlideModule 集成 AppGlideModule 我的项目中使用如下 @GlideModule public class MyAppGlideM ...
超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...

html引入html

html引入html相关推荐

最新文章

热门文章