Вставить один файл HTML в другой динамически? - PullRequest
2 голосов
/ 23 мая 2009

Существует 2 html-файла: file-1.htm и file-2.htm. Есть еще один HTML-файл, test.htm, с выпадающим списком, имеющим 2 значения: «Load Sample-1» и «Load Sample-2».

Вот что я пытаюсь: Если в раскрывающемся списке выбран «Загрузить образец-1», файл-1.htm должен быть загружен как вложенный HTML-файл в test.htm.

Прямо сейчас я могу достичь этого с помощью javascript, имея содержимое file-1.htm и file-2.htm внутри test.htm. В то время как выпадающий список становится больше, test.htm станет огромным. Как этого добиться, имея отдельные html-файлы для каждой записи в раскрывающемся списке?

Ответы [ 4 ]

8 голосов
/ 23 мая 2009

Почему бы вам просто не использовать <iframe>, а затем включить динамическое изменение кода JavaScript в iframe?

Вот пустая страница, демонстрирующая, как это использовать:

<html>
<head>
<script type="text/javascript">
var changePage = function() {
    var iframe = document.getElementById("myiframe");  // One of the many ways to select your iframe
    var select = document.getElementById("pageselected");
    var url = select.options[select.selectedIndex].value;
    iframe.src = url;
}
</script>
</head>
<body>
<select id="pageselected">
    <option value="page1.html">Page 1</option>
    <option value="page2.html">Page 2</option>
</select>
<input type="button" onclick="changePage()" value="Change Page" />
<iframe id="myiframe"></iframe>
</body>
</html>

Вы можете спросить себя "почему он не просто использовал onchange для <select>? Ну, у меня небольшая война с <select> + onchange, которую я подробно здесь расскажу , но в основном его использование делает ваш веб-сайт полностью недоступным для пользователей, использующих только клавиатуру, которые используют Internet Explorer 6 или 7. (Не уверен, что он все еще не работает в версии 8).

5 голосов
/ 23 мая 2009

Если вы используете JQuery, у них есть необычная функция jquery ('# div'). Load () http://jquery.com/ http://docs.jquery.com/Ajax/load

Прекрасно работает, а также поддерживает параметры GET и POST.

0 голосов
/ 23 мая 2009

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

0 голосов
/ 23 мая 2009

Если выпадающий список "огромен", я бы посоветовал больше не использовать выпадающий список и не просматривать некоторые из существующих полей автозаполнения для выбора языка.

Если существуют сотни и сотни параметров, раскрывающийся список больше не является подходящим элементом формы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...