2017-03-04 4 views
-1
에 작동하지 않습니다

내가에서 로컬 호스트내 웹 사이트의 일부 기능은 로컬 호스트

http://localhost/resume/dashboard/ads.html 를 통해 그것을 실행하는거야 동안 내 HTML 파일은 내가 그것을 실행하기 위해 경로

file:///C:/xampp/htdocs/resume/dashboard/ads.html를 사용하고있는 동안 완벽하게 작동되지만, 같은 위치, 일부 기능은 다음과 같습니다.

(모달 스크롤링 및 js 코드)이 작동하지 않습니다.

도와주세요!

ads.html 비

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png"> 
    <link rel="icon" type="image/png" sizes="96x96" href="../img/logo/kk.png"> 
    <link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

    <title>Ads</title> 

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
    <meta name="viewport" content="width=device-width" /> 


    <!-- Bootstrap core CSS  --> 
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> 

    <!-- Animation library for notifications --> 
    <link href="assets/css/animate.min.css" rel="stylesheet"/> 

    <!-- Paper Dashboard core CSS --> 
    <link href="assets/css/paper-dashboard.css" rel="stylesheet"/> 


    <!-- CSS for Demo Purpose, don't include it in your project  --> 
    <link href="assets/css/demo.css" rel="stylesheet" /> 


    <!-- Fonts and icons  --> 
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> 
    <link href="assets/css/themify-icons.css" rel="stylesheet"> 

</head> 
<body> 



<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1"> 
    Launch Modal 1 
</button> 

<div class="modal fade" id="modal-1"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Modal 1</p> 

    <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next ></a> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 



    <!-- #modal 2 --> 
<div class="modal fade" id="modal-2"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

    <a href="#modal-1" data-toggle="modal" data-dismiss="modal">< Previous</a> 
     <p>Modal .Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla..2</p> 


     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 




</body> 
    <script></script> 
    <!-- Core JS Files --> 
    <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap.min.js" type="text/javascript"></script> 

    <!-- Checkbox, Radio & Switch Plugins --> 
    <script src="assets/js/bootstrap-checkbox-radio.js"></script> 

    <!-- Charts Plugin --> 
    <script src="assets/js/chartist.min.js"></script> 

    <!-- Notifications Plugin --> 
    <script src="assets/js/bootstrap-notify.js"></script> 

    <!-- Google Maps Plugin --> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 

    <!-- Paper Dashboard Core javascript and methods for Demo purpose --> 
    <script src="assets/js/paper-dashboard.js"></script> 

    <!-- Paper Dashboard DEMO methods, don't include it in your project! --> 
    <script src="assets/js/demo.js"></script> 



</html> 

코드 섹션에서 bootstrap.min.css

#modal-2 { 
     overflow-y:scroll; 
    } 

번째 모달 스크롤되지 않는다.

+0

코드의 관련 섹션이 필요합니다. css 및 js 파일을 포함한 대부분의 경우 작동하지 않습니다. – arkascha

+1

http 서버 오류 로그 파일에서 이유를 볼 수 있어야합니다. 웹 환경에서 구현할 때 항상 처음 보는 위치입니다 ... – arkascha

+0

http : // localhost를 통해 HTML 파일을로드하는 동안 javascript 및 CSS의 모든 경로를 확인하십시오 로드 중 JS 오류가 발생하면 404 오류가 발생합니다. CSS는 경로에 문제가 있음을 의미합니다. 일단 수정하면 문제가 해결됩니다. –

답변

0

가장 일반적인 문제는 잘못된 경로를 사용하고있는 것입니다. 파일 기반에서 http 기반으로 이동할 때 파일을 사용할 때 루트/폴더가 웹 루트입니다. // 루트 폴더 접근 방식은 파일이 호스팅되는 드라이브의 루트입니다.

+0

이것은 답변이 아닌 _guess_입니다. 그래서 그것은 논평이었을 것입니다. – arkascha

+0

@arkascha, 네, 사과드립니다, 당신이 옳을 수도 있습니다. 교육용 추측이지만, 파일 기반 테스트에서 HTTP 기반 테스트로 이동하는 대부분의 문제는 파일의 경로가 서로 다른 결과입니다. – GlenBee

+0

물론, 바로 거기에 있습니다. 나는 우리 모두가 자주 올바른 결론을 내리고있는 결론에 이르게하기 때문에 내 의견을 피력했다. 그러나 나는 종종 실제 문제가 완전히 다른 것을 보았 기 때문에 나는 처음에 세부 사항을 묻거나 제안 할 곳을 제안하고, 답변이 정확하고 실제로 문제를 해결하지 못했다면 _answer_ 질문 만하는 것을 선호하는 이유를 종종 보았습니다. – arkascha

0

웹 사이트는 형태로 작업 할 때와하지 다른, 그것은 일반적으로 인해 두 가지 중 하나입니다 : 다양한 자원에 대한

  1. 경로 또는 경로가 고정되어 있지 상대. 예를 들어 어쩌면 HTML이 ./javascript/myjs.js와 같은 상대 경로 대신 C : /xampp/htdocs/resume/dashboard/javascript/myjs.js라는 경로에서 Java Script 파일을 찾거나 어쩌면 이미 상대 경로를 사용하고 있지만 상대 경로의 시작 디렉토리는 꺼져 있습니다. 일반적으로 이미지가 표시되지 않거나 Java 스크립트 파일이로드되지 않음을 알 수 있습니다.
  2. localhost로 실행하면 localhost 도메인에 있고 다른 도메인에 요청하면 보안상의 이유로 중지 될 수 있습니다. 브라우저에서 개발자 콘솔을 열면 보안상의 이유로 리소스를로드 할 수 없거나 도메인 간 요청이 차단되었다는 오류가 표시되는 경우 일반적으로 이러한 유형의 오류가 표시됩니다.

일부 자바 스크립트가 작동하지 않는 경우 해당 자바 스크립트 공유의 특성을 살펴볼 것입니다 ... 경로를 공유하는 경우 경로를 확인하는 데 특별한주의가 필요하거나 jQuery가 필요한 경우 JQuery를 로컬에서로드하는 대신 웹에서로드해야합니다.

진단을 시작하려면 브라우저에서 개발자 콘솔을 여는 것이 좋습니다 (Chrome : 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하고 콘솔 탭을 봅니다). 오류를 확인하십시오. 이것은 보여준다. (일반적으로 노란 삼각형 또는 적색 정지 기호와 준 설명 오류가 뒤 따름)로드되지 않은 내용과 왜 거기에서 뒤로 작업해야하는지 알려주어야합니다.

경로가 정확하고 여전히 멈췄다면 C : \ xampp \ apache \ conf \ httpd.conf의 DocumentRoot 설정을보고 올바른 시작 디렉토리로 설정되어 있는지 확인하고 구성을 변경하기 전에 먼저 오류를 수정하십시오. configs를 변경하는 것은 최후의 수단이되어야합니다 ... 만약 당신이 원래의 백업을 유지 변경할 수 있습니다!

+0

특정 폴더에서만 작동하지 않습니다. htdocs의 다른 폴더에있는 HTML과 자산을 복사했을 때 잘 작동합니다. 하지만 내 프로젝트 폴더에 동일한 파일을 붙여 넣을 때 작동하지 않습니다. –

+0

이미 모든 경로와 개발자 콘솔을 확인했지만 찾을 수 없습니다. –

+0

작동하지 않는 폴더 경로는 무엇입니까? 경로 이름에 공백이나 다른 비정상적인 문자가있을 수 있습니까? –

관련 문제