Как загрузить страницу HTML в <div> с помощью JavaScript?

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. Когда я использую Google Chrome, он запрашивает плагин. Как мне заставить его работать в Google Chrome?

Giliweed
источник
1
И не забывайте возвращать false, как вload_home(); return false
mplungjan
2
Не слишком легко без библиотек. Может быть лучше загрузиться в iFrame. Проверьте это сообщение: stackoverflow.com/questions/14470135/…
sgeddes
1
home.html - это простая веб-страница, я только назвал ее home. @jayharris
Giliweed
И вы пытаетесь загрузить все на этой странице в элемент контента или просто поместить ссылку на страницу в элемент контента?
Аденео
Я пытаюсь загрузить все на этой странице в элемент содержимого. Я редактировал вопрос. @adeneo
Giliweed

Ответы:

213

Я наконец нашел ответ на свою проблему. Решение

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
Giliweed
источник
3
Несмотря на то, что это элегантно и чисто, я думаю, было бы лучше, если бы вы на самом деле создали элемент object через API DOM.
Дэвид
3
Это медленно и небезопасно для атаки - см. Мой ответ ниже (был слишком длинным, чтобы уместиться в комментарии)
Сэм Редуэй
1
@DavidMaes что ты предлагаешь? можете показать образец?
Xsmael
2
Хотя это может быть небезопасно, если вы выполняете простую разработку «локально в папке на рабочем столе», это нормально - не все используют веб-сайт банка, где клиенты обрабатывают информацию о банковском счете и подвергаются атаке XSS. Спасибо за решение, для моих нужд мне пришлось пойти другим путем и потребовать сервер Python и использовать обычную функцию Jquery load () для внешнего динамически загружаемого HTML. Но это помогло мне
разобраться
1
@ KamilKiełczewski type="type/html"изменен наtype="text/html"
Шаян
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 и убедиться, что ваш javascript загружен перед разметкой, которая вызывает load_home()функцию

Ссылка - Дэвидвалш

MDN - Использование Fetch

JSFIDDLE демо

Джей Харрис
источник
Спасибо. но мой код относится к части проекта. и извините, что я не предполагаю использовать iframe в работе над проектом. Я редактировал вопрос. посмотри @jay Harris
Giliweed
1
@Jay Harris: А как насчет политики происхождения?
ArunRaj
1
@ArunRaj вы не можете загрузить страницу, которая приходит с другого сайта в javascript, т.к. это проблема безопасности. но вы можете загрузить скрипт с вашего сервера, который, в свою очередь, загрузит другую страницу и вернет ее обратно в javascript через ajax.
Джей Харрис
1
Добавление Content-Typeзаголовка к GETзапросу не имеет смысла - я думаю, вы имели в виду setRequestHeader("Accept", "text/html")?
mindplay.dk
24

Извлечение HTML современным способом Javascript

Этот подход использует современные функции Javascript, такие как async/awaitи fetchAPI. Он загружает 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();
}

См. Документацию по fetch API для более подробной информации.

Лучио Пайва
источник
Для тех, у кого возникают проблемы с использованием этого, убедитесь, что функции написаны вне функции "window.onload".
Зимняя Кара
19

Я видел это и думал, что это выглядит довольно хорошо, поэтому я провел несколько тестов на нем.

Это может показаться чистым подходом, но с точки зрения производительности он отстает на 50% по сравнению со временем, которое потребовалось для загрузки страницы с помощью функции загрузки jQuery или с использованием ванильного JavaScript-подхода XMLHttpRequest, которые были примерно похожи друг на друга.

Я предполагаю, что это потому, что под капотом он получает страницу точно таким же образом, но он также должен иметь дело с созданием целого нового объекта HTMLElement.

В заключение я предлагаю использовать jQuery. Синтаксис настолько прост в использовании, насколько это возможно, и имеет хорошо структурированный обратный вызов для вас. Это также относительно быстро. Ванильный подход может быть быстрее незаметно за несколько миллисекунд, но синтаксис сбивает с толку. Я бы использовал это только в среде, где у меня не было доступа к jQuery.

Вот код, который я использовал для тестирования - он довольно элементарный, но времена возвращались очень согласованными в нескольких попытках, поэтому я бы сказал, что с точностью до + - 5 мс в каждом случае. Тесты запускались в 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
Я думаю, что вместо «точный» вы имеете в виду «точный».
Pul0ne
Я имею в виду, что я запускал его много раз, и каждый раз было всего несколько миллисекунд. Таким образом, приведенное время соответствует + - 5 мс или что-то близкое к этому. Извините, возможно, я не совсем ясно понял.
Сэм Редуэй
6

Когда используешь

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

Затем помните, что вы не можете "отлаживать" в Chrome локально, потому что XMLHttpRequest не может загрузить - это не означает, что он не работает, это просто означает, что вам нужно протестировать свой код на том же домене, иначе. ваш сервер

Serup
источник
5
"jQuery"! = "javascript" || jQuery <javascript || OP.indexOf ("jQuery") <1
KittenCodings
4

Вы можете использовать jQuery:

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
Anup
источник
3
Пожалуйста, объясните свой ответ. Также это выглядит как jQuery, который ОП не упомянул в вопросе.
Дэвид
2
сэр, вот еще несколько ответов в JQuery
Anup
jQuery довольно стандартен для таких вызовов Ajax; поэтому я нахожу ответ кратким и уместным.
Лука
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 в теге script.

В этом случае вы должны написать это без функции с именем Just. Скрипт вызывает функциональное слово и запускает include header.php Т.е. преобразует функцию php include в функцию Java в теге script и помещает весь ваш контент в этот включаемый файл.

Creative87
источник
0

Используйте этот простой код

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
Cak Sup
источник
w3.includeHTML () не определено
toing_toing
Для тех, кто интересуется, w3-include-HTMLявляется частью W3.JSбиблиотеки сценариев W3Schools.com (доступно здесь: 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. теги не работают кросс-браузер, и в основном используются для Flash

Например: <iframe src="home.html" width="100" height="100"/>

Джайнский абхишек
источник