JavaScript를 사용하여 <div>에 HTML 페이지를로드하는 방법

161

home.html을로드하고 싶습니다 <div id="content">. 

<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
  }
</script>

Firefox를 사용할 때 제대로 작동합니다. Chrome을 사용하면 플러그인을 요청합니다. Chrome에서 작동하게하려면 어떻게해야하나요?

javascript  html  google-chrome 
— 길리 위드
소스
1
다음과 같이 false를 반환해야합니다.load_home(); return false
— mplungjan
2
라이브러리가 없으면 쉽지 않습니다. iFrame으로 로딩하는 것이 더 나을 수 있습니다. 이 게시물을 확인 stackoverflow.com/questions/14470135/...
— sgeddes
1
home.html은 간단한 웹 페이지입니다. 방금 이름을 home으로 지정했습니다. @jayharris
— 길리 위드
그리고 그 페이지의 모든 것을 content 요소에로드하거나 content 요소에 페이지에 대한 링크를 넣으려고합니까?
— adeneo
해당 페이지의 모든 내용을 content 요소에로드하려고합니다. 질문을 편집했습니다. @adeneo
— 길리 위드

답변:

213

마침내 내 문제에 대한 답을 찾았습니다. 해결책은

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
— 길리 위드
소스
3
이것이 우아하고 깨끗하지만 실제로 DOM API를 통해 객체 요소를 만들면 더 좋을 것이라고 생각합니다.
— David
3
이것은 느리고 공격하기에 안전하지 않습니다. 아래의 답변을 참조하십시오 (댓글을 작성하기에는 너무 깁니다)
— Sam Redway
1
@DavidMaes 당신은 무엇을 제안합니까? 샘플을 보여 줄 수 있습니까?
— Xsmael
2
이것이 안전하지 않을 수도 있지만 간단한 "데스크톱의 폴더 내 로컬"개발을 수행하는 경우 문제가 없습니다. 모든 고객이 은행 계좌 정보를 처리하고 XSS 공격을당하는 고객과 함께 은행 웹 사이트를 실행하고있는 것은 아닙니다. 솔루션 덕분에 내 요구에 따라 다른 경로를 거쳐 파이썬 서버가 필요하고 외부 동적으로로드 된 HTML에 대해 일반 Jquery load () 함수를 사용해야했습니다. 그러나 이것은 내 문제를 해결하는데 도움이되었다
— rwarner
1
@ KamilKiełczewski type="type/html"가 다음과 같이 변경되었습니다 :type="text/html"
— Shayan
63

jQuery로드 기능을 사용할 수 있습니다.

<div id="topBar">
    <a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("content.html");
    });
});
</script>

죄송합니다. 로드 시가 아닌 클릭시 수정되었습니다.

— 아론리스 케
소스
안녕하세요,이 방법을 사용하려고했지만 제대로 작동하지 않습니다. 원하는 경우 새 질문을 열 수 있습니다. 감사. 내 바이올린은 여기 있습니다 : jsfiddle.net/ekareem/aq9Laaew/288345
— NoChance
52

가져 오기 API

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("http://www.yoursite.com/home.html" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
}

XHR API

function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('content')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "http://www.yoursite.com/home.html", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

제약 조건에 따라 ajax를 사용해야하고 load_home()함수 를 호출하는 마크 업 전에 자바 스크립트가로드되어 있는지 확인하십시오.

참조-davidwalsh

MDN-가져 오기 사용

JSFIDDLE 데모

— 제이 해리스
소스
감사. 내 코드는 프로젝트의 일부와 관련이 있습니다. 프로젝트 작업에 iframe을 사용한다고 가정하지 않아도됩니다. 질문을 편집했습니다. @jay harris를 살펴보십시오
— Giliweed
1
@Jay Harris : 동일한 원산지 정책은 어떻습니까?
— ArunRaj
1
@ ArunRaj 당신은 javascript bc 내의 다른 웹 사이트에서 온 페이지를로드 할 수 없습니다. 그것은 보안상의 문제입니다. 그러나 서버에서 스크립트를로드 할 수 있습니다. 그러면 다른 페이지가로드되고 ajax를 통해 자바 스크립트로 다시 에코됩니다.
— Jay Harris
1
요청에 Content-Type헤더를 추가하는 GET것은 의미가 없습니다 setRequestHeader("Accept", "text/html").
— mindplay.dk
24

현대적인 자바 스크립트 방식으로 HTML 가져 오기

이 접근 방식은 API async/await와 같은 최신 Javascript 기능을 사용 fetch합니다. HTML을 텍스트로 다운로드 한 다음 innerHTML컨테이너 요소에 공급합니다 .

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

는 await (await fetch(url)).text()조금 까다로운 보일 수 있지만, 설명하기 쉽습니다. 두 개의 비동기 단계가 있으며 다음과 같이 해당 기능을 다시 작성할 수 있습니다.

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

자세한 내용은 페치 API 문서 를 참조하십시오.

— 루시오 파이 바
소스
이것을 사용하는데 문제가있는 사람들을 위해, 함수가 "window.onload"함수 외부에 쓰여 졌는지 확인하십시오.
— 겨울 카라
19

나는 이것을 보았고 꽤 멋지게 보였으므로 테스트를 실시했다.

깔끔한 접근 방식처럼 보일 수 있지만 성능면에서 jQuery로드 기능으로 페이지를로드하거나 XMLHttpRequest의 바닐라 자바 ​​스크립트 접근 방식을 사용하는 것과 비교할 때 시간이 50 % 지연됩니다.

나는 이것이 후드 아래에서 페이지를 똑같은 방식으로 가져 오기 때문에 완전히 새로운 HTMLElement 객체를 구성해야하기 때문에 이것이 상상합니다.

요약하면 jQuery를 사용하는 것이 좋습니다. 구문은 가능한 한 사용하기 쉬우 며 사용하기에 좋은 구조의 콜백이 있습니다. 또한 비교적 빠릅니다. 바닐라 접근법은 눈에 띄지 않는 몇 밀리 초만큼 빠를 수 있지만 구문은 혼란 스럽습니다. jQuery에 액세스 할 수없는 환경에서만 이것을 사용합니다.

테스트에 사용한 코드는 다음과 같습니다. 상당히 초보적이지만 여러 번의 시도에서 시간이 매우 일정하게 돌아 왔으므로 각 경우에 약 + -5ms 정도 정확하다고 말할 것입니다. 내 홈 서버에서 Chrome으로 테스트를 실행했습니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page   = 'testpage.htm';
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>
— 샘 레드 웨이
소스
1
"정확한"대신 "정확한"을 의미한다고 생각합니다.
— pulse0ne
나는 그것을 여러 번 실행했고 매번 몇 밀리 초의 스윙 만 있음을 의미합니다. 따라서 주어진 시간은 + -5ms 또는 그에 가까운 것에 정확합니다. 미안하지만 나는 완전히 명확하지 않을 수 있습니다.
— Sam Redway
6

사용할 때 

$("#content").load("content.html");

그런 다음 XMLHttpRequest가로드 할 수 없기 때문에 크롬에서 로컬로 "디버그"할 수 없음을 기억하십시오. 이는 작동하지 않음을 의미하는 것이 아니라 동일한 도메인에서 코드를 테스트해야한다는 의미입니다. 당신의 서버

— Serup
소스
5
"jQuery"! = "자바 스크립트"|| jQuery <자바 스크립트 || OP.indexOf ( "jQuery") <1
— KittenCodings
4

jQuery를 사용할 수 있습니다 : 

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
— 아웁
소스
3
답을 설명하십시오. 또한 이것은 OP가 질문에서 언급하지 않은 jQuery와 같습니다.
— David
2
여기에 더 많은 답변이 jquery에 있습니다
— Anup
jQuery는 이러한 Ajax 호출을 수행하는 데 매우 표준이다. 간결하고 적절하게 답변을 찾습니다.
— Luca
2

시험

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

코드 스 니펫 표시

— 카밀 키에브 제 스키
소스
1 
$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

또는 

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
— 크리슈나 패 타르
소스
0

이것은 일반적으로 header.php 또는 다른 페이지를 포함하려고 할 때 필요합니다.

Java에서는 HTML 페이지가 있고 PHP include 함수를 사용하지 않으려는 경우 특히 쉽습니다. 그러나 PHP 함수를 작성하고 스크립트 태그에 Java 함수로 추가해야합니다.

이 경우 함수없이 이름 만 써야합니다. 스크립트는 함수 단어를 불러 내고 include header.php를 시작합니다. 즉, php include 함수를 스크립트 태그의 Java 함수로 변환하고 포함 된 파일에 모든 내용을 넣습니다.

— 창조적 인 87
소스
0

이 간단한 코드를 사용하십시오

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
— Sup 수프
소스
w3.includeHTML ()이 정의되지 않았습니다
— toing_toing
궁금한 w3-include-HTML점이 있으시면 W3Schools.com의 W3.JS스크립트 라이브러리 ( w3schools.com/w3js/default.asp ) 의 일부입니다 . W3Schools (및 w3.js 및 w3.includeHTML())는 W3 컨소시엄 (HTML + CSS + DOM 표준을 정의하는 두 가지 주요 그룹 중 하나 (다른 그룹은 WHATWG))과 관련이 없습니다.
— 다이
-4

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>
— 루돌프 렘식
소스
1
질문에 해당하지 않는 답변으로 답변 함, 이미 질문을 한 사람이 답변했습니다
— Katler
-5

html 파일이 로컬에 있으면 태그 대신 iframe으로 이동하십시오. 태그는 브라우저 간 작동하지 않으며 주로 플래시에 사용됩니다.

예를 들어 : <iframe src="home.html" width="100" height="100"/>

— 자인 아비 ish
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.