页面中如何引入外部的 html 或 css

爱被打了一巴掌 2021-11-29 05:26 331阅读 0赞

参考: [https://www.cnblogs.com/Renyi-Fan/p/9284231.html][https_www.cnblogs.com_Renyi-Fan_p_9284231.html]

1. 四种方法

[a、iframe标签        b、ajax引入代码片段        c、link import的方法导入        d、requirejs][a_iframe_ b_ajax_ c_link import_ d_requirejs]

2. iframe 方式引入

如果是一个完整的外部页面（有完整的html，head,body），可以考虑用iframe。

`3. ajax 方式`

如果仅仅是一个代码片段，也可以用ajax

$.get('test.html',function(html){
        //
    });
    $.when(
        $.get('test1.html'),
        $.get('test2.html'),
    ).then(function(html1,html2){
        console.log(html1[0]);
        console.log(html2[0]);
    });

4. link import

引入整个页面

5. **`require js`**

最后，也可以使用**`requirejs`**…（比ajax方便）

6. [引用外部CSS的link和import方式的分析与比较][CSS_link_import]

参考: [https://www.cnblogs.com/xupeiyu/p/3564926.html][CSS_link_import]

import 引入外部css

link 引入外部css

或者 `<``link` `rel="stylesheet" rev="stylesheet" href="style.css" media="all" />`

[https_www.cnblogs.com_Renyi-Fan_p_9284231.html]: https://www.cnblogs.com/Renyi-Fan/p/9284231.html
[a_iframe_ b_ajax_ c_link import_ d_requirejs]: https://www.cnblogs.com/Renyi-Fan/p/9284231.html#_label0_0
[CSS_link_import]: https://www.cnblogs.com/xupeiyu/p/3564926.html