HTML5 가져 오기가 작동하지 않습니다.

다른 HTML 파일에 HTML 파일을 포함하는 방법을 찾고 있습니다 ... 예를 들어 3 개의 html 파일이 있습니다. 1) header.html 2) content.html 3) footer.html. .. 그리고 나는 여러 웹 사이트를 만들 수 있도록 header.html과 footer.html을 content.html 안에 포함하고 싶습니다. 머리말과 꼬리말을 포함하고, 영향을받는 머리글과 바닥 글을 변경해야한다면 모든 웹 사이트로 html 파일에서 가져온 내용을 읽었습니다.이 파일은 다음과 같습니다.HTML5 가져 오기가 작동하지 않습니다.

<link rel="import" href="header.html">

나는 그것을 시험해 보았다. 가져 오기가 브라우저에서 지원됩니까? 그렇다면 어떻게 작동시킬 수 있습니까?

나는 PHP와 비슷한 방식이지만, html을 찾고있다.

감사합니다.

출처

2016-07-02 NoName84

올바른 작업은 서버 쪽 페이지를 통해 또는 JavaScript를 통해 수행하는 것입니다.

PHP 예 :

<html> 
<body> 

<h1>Welcome to my home page!</h1> 
<p>Some text.</p> 
<p>Some more text.</p> 
<?php include 'footer.php';?> 

</body> 
</html>

자바 스크립트 예 :

<script type="text/javascript"> 
function loadXMLDoc() { 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
      if (xmlhttp.status == 200) { 
       document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
      } 
      else if (xmlhttp.status == 400) { 
       alert('There was an error 400'); 
      } 
      else { 
       alert('something else other than 200 was returned'); 
      } 
     } 
    }; 

    xmlhttp.open("GET", "header.html", true); 
    xmlhttp.send(); 
} 
</script>

자바 스크립트와 jQuery 라이브러리 :

$.ajax({ 
    url: "header.html", 
    success: function(data){ 
     $("myDiv").html(data.responseText); 
    } 
});

당신은 JS의 손이 더러워하지 않으려면 w3schools에서 제공하는 스크립트를 사용하여 다음을 수행 할 수 있습니다.

<!DOCTYPE html> 
<html> 
<script src="http://www.w3schools.com/lib/w3data.js"></script> 

<body> 

<div w3-include-html="header.html"></div> 

<script> 
w3IncludeHTML(); 
</script> 

</body> 
</html>

출처

2016-07-02 13:35:23 zubair1024

W3schools 솔루션이 훌륭하게 작동하지만 Zubair에 감사드립니다. 사용하기에 안전합니까? 다른 개발자가 사용하고 있습니까? – NoName84

예, 다음 http : // www.w3schools.com/lib/w3data.js에서 소스 코드를 다운로드 할 수 있습니다. 파일 시스템에서 로컬로 검토 및 호스트하고 거기에서 포함하십시오. – zubair1024

확인해 주셔서 감사합니다. Zubair1024 – NoName84

그건 불가능합니다. HTML 페이지를 다른 페이지에 포함 할 수 없거나 PHP include()/require() 함수를 사용해야합니다. 그렇지

, 당신은 AJAX와 동적으로 페이지를로드 할 수 있습니다 (내가 jQuery를 사용 여기에) 같이, 메인 페이지에 출력을 추가합니다

이

<body> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript"> 
     $.ajax({ 
      url: 'page.html', 
      success: function(content) { 
       document.body.innerHTML += content; 
      } 
     }); 
    </script> 
</body>

(당신이 '오류'이벤트를 추가해야합니다 등등. 그것은 단지 쉬운 예일뿐입니다.)

출처

2016-07-02 13:26:55 ClementNerma

HTML5 가져 오기가 작동하지 않습니다.

답변

관련 문제