[javascript] HTML 파일에 다른 HTML 파일 포함
내가 가진 2 개 HTML 파일, 가정 a.html및b.html . 에 a.html나는 포함 할 b.html.
JSF에서는 다음과 같이 할 수 있습니다.
<ui:include src="b.xhtml" />그것은 내부를 의미 a.xhtml파일 포함 할 수b.xhtml .
*.html파일로 어떻게 할 수 있습니까?
답변
제 생각에는 최고의 솔루션은 jQuery를 사용합니다.
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>b.html:
<p>This is my include file</p>이 방법은 내 문제에 대한 간단하고 깨끗한 해결책입니다.
jQuery .load()설명서는 여기에 있습니다 .
답변
위에서 lolo의 답변을 확장하면 많은 파일을 포함 해야하는 경우 약간의 자동화가 있습니다.
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>그런 다음 html에 무언가를 포함시킵니다.
<div data-include="header"></div>
<div data-include="footer"></div>views / header.html 및 views / footer.html 파일이 포함됩니다
답변
내 솔루션은 위 의 lolo 와 유사합니다 . 그러나 jQuery를 사용하는 대신 JavaScript의 document.write를 통해 HTML 코드를 삽입합니다.
a.html :
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>b.js :
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');jQuery를 사용하지 않는 이유는 jQuery.js의 크기가 ~ 90kb이므로 가능한 한 적은 양의 데이터를로드하고 싶습니다.
많은 작업없이 올바르게 이스케이프 된 JavaScript 파일을 얻으려면 다음 sed 명령을 사용할 수 있습니다.
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html또는 Github에서 Gist로 게시 된 다음과 같은 편리한 bash 스크립트를 사용하면 필요한 모든 작업을 자동화 b.html하여 b.js다음으로 변환 할 수 있습니다 .
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6를
크레딧 그렉 Minshall 내 원래 나오지도 명령은 고려하지 않았다 또한 다시 슬래시와 따옴표를 이스케이프 개선 나오지 명령합니다.
또는 템플릿 리터럴 을 지원하는 브라우저의 경우 경우 다음도 작동합니다.
b.js :
document.write(`
<h1>Add your HTML code here</h1>
<p>Notice, you do not have to escape LF's with a '\',
like demonstrated in the above code listing.
</p>
`);답변
HTML5rocks 튜토리얼
및 폴리머 프로젝트 를 통한 HTML5 가져 오기 체크 아웃
예를 들면 다음과 같습니다.
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>답변
내가 작성한 라이브러리의 뻔뻔한 플러그가 이것을 해결합니다.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>위의 내용을 가져 와서 /path/to/include.html대체합니다 div.
답변
동일한 폴더에있는 다른 파일을 포함하는 간단한 서버 측 include 지시문은 다음과 같습니다.
<!--#include virtual="a.html" --> 답변
스크립트가 필요 없습니다. 서버 측에서 멋진 것을 할 필요가 없습니다 (아마도 더 나은 옵션 일 것입니다)
<iframe src="/path/to/file.html" seamless></iframe>이전 브라우저는 완벽하게 지원하지 않으므로 CSS를 추가하여 수정해야합니다.
iframe[seamless] {
border: none;
}완벽하게 지원하지 않는 브라우저의 경우 iframe에서 링크를 클릭하면 프레임 이 전체 창이 아닌 해당 URL로 이동합니다. 이 문제를 해결하는 방법은 모든 링크 target="_parent"에 브라우저를 지원하는 것입니다.
