[javascript] HTML 파일에 다른 HTML 파일 포함

JAVASCRIPT / 글쓴이

내가 가진 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"에 브라우저를 지원하는 것입니다.