한 텍스트 파일의 코드를 HTML 페이지에 삽입하는 방법

개발중인 일련의 대형 html 페이지가 있으며 각 페이지에는 header/content/sidebar라는 공통 구조가 사용됩니다.한 텍스트 파일의 코드를 HTML 페이지에 삽입하는 방법

헤더 및 사이드 바 섹션에는 모든 페이지에 공통된 코드가 있습니다. 콘텐츠 만 변경됩니다.

개발 단계에서 헤더와 사이드 바를 한 번 변경하고 각 페이지를 별도로 편집하지 않고 모든 페이지에 복제 된 결과를 볼 수 있기를 바랍니다.

나는 약간의 인터넷 검색을했는데, 가장 간단한 해결책은 헤더와 사이드 바 섹션에 대한 코드와 2 개의 개별 텍스트 파일을 만든 다음 HTML 페이지의 적절한 지점에이를 삽입하는 것으로 보인다. m 편집.

이 기능은 라이브 프로젝트에는 권장되지 않습니다.로드 시간이 급격히 늘어날 것이므로, dev 작업을하면 시간이 많이 걸릴 것입니다.

동의 하시겠습니까? 그렇다면 누구나 가장 간단한 방법은 무엇인지 알 수 있습니까?

감사

출처

2013-07-10 alias51

나는 사용자 AJAX가 페이지의 몸체 또는 다른 div 만 업데이트 할 수 있다고 생각한다. – DGomez

http://api.jquery.com/load/ 나는 이것이 당신이 원하는 것이라고 생각한다. 편집 : 죄송합니다. 댓글을 입력해야합니다. – Th3BFG

자바 스크립트 만 사용하려는 이유가 있으십니까?, 서버 측 언어가 필요한 모든 파일을 '포함'할 수 있어야합니다 – Anil

당신은 PHP와 같은 서버 측 기술의 일종으로이 작업을 수행하는 것이 좋습니다 것입니다. 이렇게하면 페이지가 브라우저로 전송되기 전에 페이지가 연결될 때로드 시간에 미치는 영향을 무시할 수 있습니다.

<?php require('header.php'); ?> 

<!-- Main content goes here --> 

<?php require('sidebar.php'); ?>

을 그리고 파일이 메인 파일과 동일한 디렉토리에 header.php와 sidebar.php 있습니다

이 같은 일을하여 달성 할 것입니다.

출처

2013-07-10 15:12:58

서로 파일을 포함시킬 수있는 일종의 serverside templating languate를 사용하십시오.

출처

2013-07-10 15:12:58 Neal

경우, 다른 답변에도 불구하고, 다음은 내가 사용하는 모듈입니다, 자바 스크립트에서 이렇게 주장한다 :

(function xload (slctr) { //================================================== xload === 
    function xloader (src, dst) { 
    if (arguments.length == 1) { 
     dst = src; 
     src = dst.getAttribute ('data-source') || ''; 
    } 

    var req; 

    try { 
     src = src.match (/^([^]*?)(!)?(?:\[\[([^]*?)\]\])?$/); 
     (req = new XMLHttpRequest()).open ('GET', src[1], !src[2]); 
     req.onreadystatechange = function (ev) { 
     if (this.readyState === 4) { 
      if (typeof dst == 'function') 
      dst (req); 
      else { 
      dst[dst.tagName == 'TEXTAREA' ? 'value' : 'innerHTML'] = this.responseText; 
      [].forEach.call (dst.getElementsByTagName ('SCRIPT'), function (s, i) { 
       var script = document.createElement ('script'); 
       script.innerHTML = s.parentNode.removeChild (s).innerHTML; 
       document.body.appendChild (script); 
      }) 
      } 
     } 
     }; 
     src[3] && req.overrideMimeType && 
     req.overrideMimeType (src[3]); 
     req.send (null); 
    } catch (err) { console.log ('xloader error : ', err); } 
    } 

    [].forEach.call (document.querySelectorAll (slctr), function (el) { xloader (el); }); 

}) ('[data-source]'); //------------------------------------------------------ xload ---

모든 요소하는 data-source 속성 예를 들어 div가 처리됩니다. data-source은 포함 할 파일의 URL을 지정합니다. Ajax 요청이 완료되면 div의 전체 내용이 가져온 텍스트로 바뀝니다. data-sourc URL 임의로 [[ 및 ]]

로드 텍스트의 모든 스크립트가 추출 된 문서 본문에 주입 묶인 MIME 타입에 의해 다음 동기 부하를 나타내는 ! 하였다 될 수있다.

오류 상태가 콘솔에보고됩니다.

모듈은 완전히 독립형이며 data-source 속성을 포함하는 모든 요소를 처리합니다. 물론 페이지의 HTML 텍스트 뒤에로드해야합니다.

출처

2013-07-10 15:50:26 HBP

한 텍스트 파일의 코드를 HTML 페이지에 삽입하는 방법

답변

관련 문제