jquery动态装入 HTML 文件网页内容和动态引入css文件、动态引入js文件

(1)只动态引入html内容（使用url参数）：语法 jquery对象.load(url);

示例：

//头部是一个包含html内容的文件
$('header').load('头部.html .container');

头部.html ~（即你需要的内容写成的html代码）

<div class="container">
	<h1>我是头部</h1>
</div>

(2) 动态引入html内容,同时引入其对应的css样式文件：语法 jquery对象.load(url，function(){ //回调函数里引入css文件 });

示例：~ 头部.css 文件就是修饰头部.html 中的样式的css 文件

$('header').load('头部.html .container',function(){
    
    　　　　
　　　　let link = document.createElement('link');
   　　　　 $(link).attr({
    
    
       　　 rel:'stylesheet',
        　　type:'text/css',
       　　 href:'./css/头部.css'
   　　 });
    $('head').append(link);
});

将动态引入css封装成一个方法，则可以改写代码：

//封装js动态加载css文件
function addCss(href){
    
    
    //判断是否是同文件
    let links = $("link");
    let isHave = false;
    links.each(function (index, element) {
    
    
        if($(element).attr('href') === href) {
    
    
            isHave = true;
        }
    });
    if (isHave) return;
    let link = document.createElement('link');
    $(link).attr({
    
    
        rel:'stylesheet',
        type:'text/css',
        href
    });
    $('head').append(link);
}


//头部:动态加载html页面，且通过function动态引入其对应的css样式
$('header').load('头部.html .container',addCss('./css/头部.css'));
//或者：
$('header').load('头部.html .container',function () {
    
    
    addCss('./css/头部.css');
});

(3) 动态引入html内容,同时引入其对应的css样式文件和js 文件：语法 jquery对象.load(url，function(){ //回调函数里引入css文件，js 文件的引入函数 });

$('header').load('头部.html .container', function () {
    
    
     addCss('./css/头部.css');
     //使用jquery的函数getScript(参数是 js文件的路径)，动态引入js文件
     $.getScript('js/头部.js',function () {
    
    
        //这里可以写在引入头部.js 文件，还动态生成了什么内容
     });
});

jquery动态装入 HTML 文件网页内容和动态引入css文件、动态引入js文件

猜你喜欢