Как загрузить HTML-код в таблицу, используя Javascript?

Question

Я создаю простой веб-сайт, который состоит из заголовка (заголовок и меню) и таблицы, в которой размещается контент (потому что тогда я могу упростить макет). Проблема в том, что каждый раз, когда я меняю категорию (нажимаю на ссылку в меню), весь сайт на короткое время становится белым во время загрузки. Мне бы хотелось, чтобы этого не происходило, поэтому мне нужно только загрузить содержимое таблицы, а не всю страницу. Я думаю, это легко сделать с помощью фреймов, но мне сказали, что они скоро перестанут поддерживаться, и что это плохая практика их использования. Есть ли способ сделать это?

Пока сайт здесь, так что вы можете видеть эффект, о котором я говорю: http://bljak.org:1235/index.html.

Кроме того, было бы лучше, если бы сайт был только HTML и Javascript, потому что я не очень знаком с PHP (и я пишу на нетбуке с 512 МБ ОЗУ, поэтому я сомневаюсь, что смогу запустить сервер там). ).

Answer 1

Я уступлю на основе jQuery - это самый простой и короткий способ.

Во-первых, скачайте последнюю библиотеку jQuery - можно найти здесь .

Предположим, вы называете свой локальный файл "jquery.min.js" в вашей существующей HTML-строке такой строкой, чтобы "включать" библиотеку jQuery:

<script type="text/javascript" src="jquery.min.js"></script>

Теперь все, что вам нужно, - это код на вашей странице ивсе готово:

<script type="text/javascript">
    $(document).ready(function() {
        $("a").bind("click", function() {
            var href = $(this).attr("href");

            //bust nasty browser AJAX cache:
            href += "?nnn=" + parseInt(Math.random() * 1000000);

            $("#Container").load(href);
            return false;
        });
    });
</script>

Замените Контейнер идентификатором фактического элемента на вашей странице, который должен содержать "тело", после чего нажатие на любую ссылку приведет к тому, что связанная страница будетзагружаться в контейнер без полной перезагрузки страницы.

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

jQuery меньше 100 КБ, поэтомус современной скоростью интернета это действительно не должно быть проблемой - конечно, возможен чистый JavaScript, но он будет вызывать много головной боли при его сохранении в разных браузерах.

Answer 2

Вы можете использовать innerHTML, чтобы переписать текст между тегом и его тегом закрытия:

<script type="text/javascript">
function changeText(){
    document.getElementById('tbl').innerHTML = '<table><tr><td>New Text</td></tr></table>';
}
</script>
<div id="tbl"></div> 
<input type="button" onclick="javascript:changeText()" value="Change Text"/>