如何在页面引用外部的HTML？

转载 https://segmentfault.com/a/1190000010943143 在页面内部应用外部的html片段，是一个很常见的用法，那么有哪些方法可以实现呢？

根据情况使用不同的方法。

iframe

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

<iframe src="test.html"></iframe>

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]); });

link import的方法导入

<link rel="import" href="test.html"> if (typeof document.querySelector("link[rel = 'import']").import == 'object') { var html = document.querySelector("link[rel = 'import']").import.head.innerHTML; } else { $.get('test.html', function(html) { }); }

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