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

Я хочу, чтобы 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?

TylerH
Редактировал вопрос 9-го августа 2014 в 8:41
Программирование
google-chrome javascript html
14-го июля 2013 в 4:30
34 просмотров
Комментарии к вопросу (5)
Решение

Наконец-то я нашел ответ на свою проблему. Решение следующее

function load_home() {
     document.getElementById("content").innerHTML='';
}
Neuron
Редактировал ответ 21-го января 2019 в 1:14
Комментарии (8)

Вы можете использовать функцию jQuery load:

<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>

Извините. Отредактировал для клика вместо загрузки.

Комментарии (1)

Получение 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().

Ссылка - davidwalsh

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

[Демонстрация JSFIDDLE](http://jsfiddle.net/jpmCz/)

Jay Harris
Редактировал ответ 22-го января 2019 в 2:07
Комментарии (4)

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

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

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

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

Вот код, который я использовал для тестирования - это довольно элементарным, но раз вернулся очень последовательно через несколько попыток, так что я бы сказал точнее примерно +- 5 мс в каждом конкретном случае. Тесты проводились в хроме с моего собственного домашнего сервера:




    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>


    <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  to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = ''
        }

        //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>
Sam Redway
Редактировал ответ 21-го сентября 2015 в 6:45
Комментарии (4)

Выборки HTML в современных JavaScript-способ

Этот подход использует современные функции JavaScript, такие как асинхронный/ждут и загрузить API-интерфейс. Он скачивает 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 loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

В ждут (ожидают получить(URL-адрес)).текст() может показаться немного сложно, но это's легко объяснить. Он имеет два асинхронных шагов, и вы могли бы переписать эту функцию так:

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

Смотрите извлечение документации API для более подробной информации.

Комментарии (0)

При использовании 

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

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

Комментарии (2)

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

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
Anup
Редактировал ответ 22-го мая 2015 в 10:45
Комментарии (4)

попробовать

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

в 

async function load_home() {
  let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'

  content.innerHTML = await (await fetch(url)).text();
}
<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

в

Комментарии (0)
 
$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

или 

document.getElementById("target_div").innerHTML='';
Neuron
Редактировал ответ 21-го января 2019 в 1:11
Комментарии (0)

Есть этот плагин на GitHub, что загрузка содержимого в элемент. Вот РЕПО

https://github.com/abdi0987/ViaJS

Комментарии (0)

Обычно это необходимо, когда вы хотите включить header.php или на любой странице.

В Java это's особенно легко, если у вас есть HTML-страницу, и Дон'т хотите использовать PHP включает функции, но вообще вам надо написать функцию PHP и добавить его в качестве Java функции в теге script.

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

Pierre.Vriens
Редактировал ответ 31-го октября 2018 в 12:33
Комментарии (0)

Универсально многоразовые чистого JavaScript

Я не'т использовать фреймворки или библиотеки (мои клиенты может если очень хочется) хотя моем веб-платформы-это'т отягощенные излишней и расточительной пропускной способности. Ниже функция, что я написал для непосредственного добавления XML к После, перед, внутри (становится последним элементом) или "заменить" и существующего элемента. Нет ненадежное барахло вроде innerHTML будет (что во многих браузерах искалиидентификатор` "и добавил, что" так можно'т быть найдены, таким образом, не надежный). Автономные функции предпосылкой использованы в приведенных ниже примерах в нижней части этого поста.

  • Первый параметр-это положение (после, перед, внутри и заменить).
  • Второй элемент-это относительный элемент, который может быть либо ссылка на объект (например, id_(&#39;содержание&#39;)) или строковое значение идентификатор элемента.
  • Третий параметр является строкой, которая будет XML-код будет добавлен в DOM. Обратите внимание, что он должен иметь пространства имен XML и что вы не должны иметь более чем один корневой элемент (например, в <div с префиксом xmlns="и http://www.w3.org/1999/xhtml"><п>все сюда</п></див>).

Функция

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}

Понимание правильной работы дом

Загрузка XML-данных через AJAX в дом правильно не требует пространства имен XML (префиксом xmlns="и http://www.w3.org/1999/xhtml") на корневой элемент (возможно, не имеют более чем один корневой элемент или если вы делаете вы будете иметь, чтобы выполнить итерации). Затем вы должны использовать этого importnode. Остальные функции-это просто семантика , где XML-код (Аякс, из другой функции и т. д.) размещается относительно других элементов в DOM.

Примеры Использования

element.appendChild(new DOMParser().parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">'+id_('post_body').value+'</div>'),'application/xml'.childNodes[0]);

Добавить XML "после" конкретного элемента:

xml_add('after', id_(push_current_id()).tag_('footer')[0], '<div class="hidden" id="editor_rich_temp"></div>');

Добавить XML " до " определенного элемента:

xml_add('before', $('#'+push_current_id()+' section')[0], '<h2 xmlns="http://www.w3.org/1999/xhtml"><span>Compose Message</span></h2>');

Добавьте XML-код "внутри" конкретного элемента (в качестве последнего дочернего элемента):

xml_add('inside', $('body > header > nav')[1], xml);

Чистого JavaScript автономного необходимых функций

Эти функции я использую на моей платформе, чтобы избежать наказания пользователей с пять копий фреймворков/библиотек и обеспечение высокой эффективности:

function $(o) {var r = false; if (document.querySelectorAll) {r = document.querySelectorAll(o);} return r;}

function class_(c) {return (document.getElementsByClassName(c)) ? document.getElementsByClassName(c) : false;}

function tag_(t) {return (document.getElementsByTagName(t)) ? document.getElementsByTagName(t) : false;}

Сочетания Пользовательских Функций

Если вы хотите чистый профессиональный JavaScript, вы'вновь придется использовать "прототип", который является удивительным. В Примере id_(&#39;примеру&#39;).tag_(&#39;тд&#39;)[0].class_(&#39;хороший&#39;)[0] строительство гораздо проще, чем возиться с $ внутри петель.

Object.prototype.$ = function(c) {return (this.querySelectorAll && this.querySelectorAll(c) && this.querySelectorAll(c).length > 0) ? this.querySelectorAll(c) : false;}

Object.prototype.class_ = function(c) {return (this.getElementsByClassName && this.getElementsByClassName(c) && this.getElementsByClassName(c).length > 0) ? this.getElementsByClassName(c) : false;}

Object.prototype.tag_ = function(t) {return (this.getElementsByTagName && this.getElementsByTagName(t) && this.getElementsByTagName(t).length > 0) ? this.getElementsByTagName(t) : false;}

Полными Сундуками Сокровищ

Я Обновить код в редких случаях (потому что он'ы скала, а не на "Версия" и зависимые). Программирования на чистом JavaScript это's легкий для того чтобы избежать массовых низкой производительности фреймворков и библиотек. https://www.jabcreations.com/docs/javascript/#functions

Комментарии (0)

showhide.html





      <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
Комментарии (1)

Если ваш HTML-файл хранится локально, а затем перейти на iframe, а не в <Объект> В теге. в <Объект> теги не работают кросс-браузер, и в основном используются для вспышки

Например : <элемент iframe в src="и домой.HTML-код как" ширина"и 100&;" Высота=то"100" и/>

Комментарии (0)