html 페이지로 HTML 콘텐츠로드

누군가이 질문을 중복으로 표시하기 전에이 문제에 대해 많은 조사를 수행했지만 아직 내 문제에 대한 해결책을 찾지 못했습니다. 그래서 나는이 header.html과 footer.html 파일을 가지고 있으며 코드를 반복하지 않으려 고하는 새로운 HTML 페이지에 내용을로드하려고합니다. 나는 PHP에서 이것을 매우 쉬운 방법으로 할 수 있다는 것을 알고 있지만, JQuery로 시작하려고한다.html 페이지로 HTML 콘텐츠로드

<!DOCTYPE html> 
<html> 

    <head> 
      <link rel="stylesheet" type="text/css" href="./style.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

      <script> 
       $(function(){ 
        $('#filename').load("footer.html"); 
       }); 
      </script>  
    </head> 

    <body> 

     <div id="filename"></div> 

    </body> 
</html>

나는 다음과 같은 오류가 점점 오전 : 이것은 지금까지 내 코드입니다

jquery.min.js:5 XMLHttpRequest cannot load file:///C:/Users/...../footer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery.min.js:5ajax @ jquery.min.js:5b.fn.load @ jquery.min.js:5(anonymous function) @ index.html:10c @ jquery.min.js:3fireWith @ jquery.min.js:3ready @ jquery.min.js:3H @ jquery.min.js:3

출처

2016-09-11 Anonymous

당신은 정말 머리글과 바닥 글이 방법을로드하지 않아야; 귀하의 페이지가 요구하는 요청 수가 증가하고 있습니다. 콘텐츠 페이지를 가져 오는 "기본"페이지의 머리글과 바닥 글이 있어야합니다. – Soviut

정확한 교차 출처 오류는 무엇입니까? 'footer.html' 요청에 대한 응답 헤더를 보여줄 수 있습니까? – Brad

사이트의 구조에 따라 정적 페이지를 원하지만 공통 템플리트를 사용하는 방식으로 작성된 경우 Webpack과 같은 번들을 고려할 수 있습니다. 정적 HTML을 전체 페이지와 결합하여 (모든 CDN에서 쉽게 호스팅 할 수 있도록) 공통 템플리트 만 유지하면됩니다. – Brad

로컬 드라이브에 AJAX 요청을 할 수 없습니다. HTTP 서버가 없으므로 HTTP 요청을 할 수 없습니다. 원본 교차 오류는 약간 오해의 소지가 있습니다.

페이지를 서버에 저장하십시오.

은 참조 : https://stackoverflow.com/a/20578692/362536

출처

2016-09-11 02:15:52 Brad

-1

요소가로드되기 전에 당신이 jQuery를 배치했기 때문에 작동하지 않는 코드는 이유 사이트가 작동하지 않게합니다.

당신은 그것을 해결하기 위해이 같은 것을 사용할 수 있습니다 : 페이지의 요소가 이미 페이지에로드 될 때까지

$(document).ready(function() { 
    $('#filename').load("footer.html"); 
});

이가 대기 한 후이를 가진 요소에 footer.html를 내용을로드합니다 파일 이름의 ID.

출처

2016-09-11 02:03:17 FluxCoder

잘못되었습니다. 문제의 코드는 이미이를 수행합니다. – Brad

html 페이지로 HTML 콘텐츠로드

답변

관련 문제