HTML 페이지에 HTML 사이드 바를 포함시키는 방법?

내 페이지의 사이드 바를 HTML 파일로 작성했습니다. 모든 HTML 페이지에 동일한 사이드 바를 포함하고 싶습니다. 사이드 바를 볼 수 있도록 내 Dashboard.html 파일에 사이드 바 HTML 파일을 포함하려면 어떻게합니까?HTML 페이지에 HTML 사이드 바를 포함시키는 방법?

불가능할 경우 다른 해결책을 제공해 주시겠습니까?

출처

2016-10-18 Rose

여기 봐 // 유래. com/questions/8988855/include-another-html-file-in-a-html 파일 아마도 도움이 될 것입니다 – Arkej

이 튜토리얼을 살펴 보시면 도움이 될 것입니다 - http://www.w3schools.com/howto/howto_html_include .asp – yashpandey

@Arkej 링크를 제공해 주셔서 감사합니다. 나는 그것을 일찍 점검하고 거기서 제안을 시도했다. 도와주지 않았어. – Rose

HTML 페이지를 다른 HTML 안에 직접 포함시킬 수 없습니다. 그러나 우리는 Jquery Load 기능을 사용하여이를 달성 할 수 있습니다. .html 파일에있는 사이드 바 저장과 같이 예를 참조

<html> 
<head> 
    <script src="/path/to/jquery.js"></script> 
    <script> 
    $(function(){ 
     $("#sidebar").load("sidebar.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="sidebar"></div> 
    </body> 
</html>

출처

2016-10-18 11:41:32

내 페이지에서 Thymeleaf를 사용하고 있습니다. 이것을 사용하면 dashboard.html 파일에 줄의 "Uncaught SyntaxError : Unexpected identifier"가 throw됩니다. – Rose

당신은 각 지시어를 사용하여 사이드 바 dashboard.html

가정 각도 JS에서

<ul> 
    <li><a> Home</a></li> 
    <li><a> About</a></li> 
    <li><a> Contact</a></li> 
    <li><a> Careers</a></li> 
</ul>

을 수행 할 수 있습니다 ngInclude

<div ng-include="'dashboard.html'"></div>

출처

2016-10-18 11:46:05 Surendra

시도해보세요. 사이드 바가 나타나지 않았습니다. 그러나 어떤 오류도 발생하지 않았습니다. 무엇이 문제일까요? – Rose

색인에 angularjs를 포함해야합니다. – Surendra

이 링크를 확인할 수 있습니다. http://www.w3schools.com/angular/tryit.asp?filename=try_ng_include – Surendra

몇 가지 방법이 있습니다. JQuery를 사용하는 것이 좋습니다.

sidebar.html 파일에 사이드 바의 html 코드가 있다고 가정 해 보겠습니다.

그런 다음, 포함 할 HTML 파일의에서, 당신은 그것을 포함을 위해 사업부를 작성해야하며, 그 안에 sidbar.html의 내용을로드 : HTTP :

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- ...or whereever you have jquery stored --> 
    <script> 
    $(function(){ 
     $("#sidebar").load("sidebar.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <!-- other content here --> 
    <div id="sidebar"></div> 
    <!-- other content here --> 
    </body> 
</html>

출처

2016-10-18 11:47:35 MarcM

이 제안은 Vinod 's와 동일합니다. 거기에 내 의견을 확인하십시오. – Rose

Thymeleaf의 문법 오류 문제는 html include 기술과 관련이 없습니다. 신중하게 코드를 두 번 확인하십시오. 또는 우리가 그것을 볼 수 있도록 우리와 공유하십시오. – MarcM

HTML 페이지에 HTML 사이드 바를 포함시키는 방법?

답변

관련 문제