JQuery .load() 함수가 부분 HTML 파일을로드하지 않고있는 것 같습니다.

-1

jQuery .load() 함수를 사용하여 부분 (이 경우에는 navbar)을 특정 div에로드하려고합니다. (내가 목표로 준 이드를 사용하여). 제가 개발하고있는 사이트를 개발하는 동안 나는 꿀꺽 꿀꺽 마시는 것을 사용하고 있습니다. 헤더가 올바르게로드되고 올바르게 작동합니다. Gulp를 실행하지 않고 로컬에서 파일을로드하려고하면 문제가 발생합니다. 대부분의 CSS, JS는 문제없이 실행되며 개발자 도구 네트워크 탭에 따라 jQuery CDN이 잘로드되지만 .load() 함수로 전달하려는 Navbar 부분이 포함 된 html 파일은 아무데도 찾을 수 없습니다. 특정 스크립트 태그의 배치를 변경하고 파일 이름을 변경하려고했으나 아무 것도 작동하지 않는 것 같습니다. `JQuery .load() 함수가 부분 HTML 파일을로드하지 않고있는 것 같습니다.

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <title>STHR | NEWS</title> 
     <link rel="stylesheet" 
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="./css/main.css"> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">  </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
    $(function(){ 
     $('#header').load('../_header.html'); 
     $('#footer').load('../_footer.html'); 
    }); 
    </script> 
</head> 
<body> 
    <div id="header"></div>`

나는 콘솔에서이 두 가지 오류가 점점 오전 :

bootstrap.min.js : 6 catch되지 않은 오류 : 부트 스트랩의 자바 스크립트 jQuery를 (익명 함수)가 필요합니다 @ bootstrap.min.js : 6

을

jquery.min.js : 4 XMLHttpRequest가 file : ///Users/andrewpohl/personal_websites/STHR/_header.html을로드 할 수 없습니다. Cross origin 요청은 http, data, chrome, chrome-extension, https, chrome-extension-resource와 같은 프로토콜 스키마에서만 지원됩니다.

업데이트 : XMLHttpRequest에 대한 오류에 대한 추가 조사를 수행했으며 로컬 서버를 통해 파일을 실행하지 않는 경우 문제가되는 것 같습니다. 나는이 문제를 인식하지 못했고 단순한 서버를 설정하지 않고 명령 줄을 통해 브라우저에 바로 파일을 열었습니다. 간단한 파이썬 서버를 사용하기 시작하자 헤더가 꿀꺽 꿀꺽하지 않고로드되기 시작했다. 이

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery("#header").load(""); 
     jQuery("#footer").load(""); 
    }); 
</script>

출처

2016-08-14 Andy Pohl

스택 오버플로에 오신 것을 환영합니다! [둘러보기]를 둘러보고 [도움말], 특히 [* 좋은 질문을하는 방법 *] (/ help/how-to-ask) 게시 * 사진을 게시하지 마십시오. *의 코드/마크 업. 코드/마크 업을 게시하십시오. 당신이 시도한 것을 보여주십시오. 그게 무슨 짓을했는지, 그리고 대신 네가 기대했던 바를 말해봐. 콘솔의 모든 오류를 기록하십시오 (아무 것도없는 경우 보았다는 것을주의하십시오.). –

T.J. 귀하의 답변과 정보에 감사드립니다. 그래도 코드 마크 업의 사진이없는 이유는 무엇입니까? –

검색 할 수 없으며 복사 및 붙여 넣기가 불가능하고 다양한 화면 크기로 읽기 어려우며 색상 인식이 "다른"경우 읽기가 어려워 ... –

사용 준비 기능은 당신이 행동하기 전에로드 할 DOM 기다릴 JQuery와 이야기합니다. <head> 태그 끝에는 여전히 #header이 DOM에로드되어 있지 않습니다.

출처

2016-08-14 09:46:37

$(function(){ 
    $('#header').load('../_header.html'); 
}

당신은이에

출처

2016-08-14 09:47:17

* "DOM을로드하기 전에 JQuery가로드 될 때까지 기다려야한다."* 아니요, * 없습니다 *. 'body' 말미에 '' 태그 바로 앞에'script' 태그를 넣을 수 있습니다.이 태그는 주로 그들이 속한 곳에 있습니다. –

.ready 함수에서 .load 함수를 래핑하고, 태그 바로 앞에 스크립트 태그를 두는 것을 시도했지만 어느 것도 작동하지 않습니다. –

T.J. 나는 그것을 알고 있지만 프로덕션 컨텍스트에 있지 않다면 생각하기가 쉽지 않다는 생각이 든다. –

JQuery .load() 함수가 부분 HTML 파일을로드하지 않고있는 것 같습니다.

답변

관련 문제