Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
DronNaTrone
0 / 0 / 0
Регистрация: 25.10.2014
Сообщений: 8
#1

заполнение div блока из файла html - JavaScript

12.01.2016, 13:54. Просмотров 1187. Ответов 4
Метки нет (Все метки)

доброго времени суток. имеется два DIV блока (A и B). в блоке А ссылки (не кнопки). как заставить при клике на ссылку из DIV блока А загрузить информацию в DIV блок B из заранее подготовленного файла .html не перезагружая при этом всю страницу? iframe не подходит так как объемы могут быть разными.

это пример с iframe который мне не подходит .

//DIV блок A

<a href="#" onclick="changediv('1.html');return false;>ссылка 1</a>
<a href="#" onclick="changediv('2.html');return false;>ссылка 2</a>

//DIV блок B

<div id="B"></div>

<script type="text/javascript">
function changediv(id) {document.getElementById('B').innerHTML
= '<iframe src="'+id+'" width=100% height=500px frameborder="0" scrolling="no" allowtransparency="true"> noresize';}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.01.2016, 13:54
Здравствуйте! Я подобрал для вас темы с ответами на вопрос заполнение div блока из файла html (JavaScript):

Как вставить в div код с другого файла HTML? - JavaScript
Собственно вот код из файла 404.html: &lt;h2&gt;404.HTML&lt;/h2&gt; &lt;p&gt;Тестовое окно&lt;/p&gt; Пытался так сделать: function windowInfo(file){ ...

Вписать код html страницы в <div></div> - JavaScript
Доброго времени суток :) Т.к. я профан в JS, а скорей новичок :) У меня на сайте есть папка там есть html или txt (посоветуйте как...

Обновление блока div - JavaScript
Подскажите, пожалуйста, как можно сделать обновление содержимого внутри div? &lt;html&gt; &lt;head&gt; &lt;script type=&quot;text/javascript&quot;...

Скриншот блока div - JavaScript
Собственно , как реализовать следующие: Короче тема говорит сама за себя, как сделать скриншот содержимого блока div ? И сохранить это...

Перемещение div блока - JavaScript
Народ, помогите нужно чтобы при нажатии на кнопку перемещялся div блок. Как это осуществить? Вот код &lt;html&gt; &lt;head&gt; &lt;style&gt; ...

Перемещение div блока мышкой - JavaScript
Есть скрипт перемещения div блока, нужно чтобы по достижению определённых координат перемещение останавливалось. Подскажите как это...

4
arcmag
259 / 255 / 115
Регистрация: 27.06.2014
Сообщений: 665
12.01.2016, 15:15 #2
Ну в качестве варианта вот так можно...

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        function includeFile (out) {
            var btns    = document.querySelectorAll ("[data-file]"),
                res     = document.querySelector (out),
                include = function (name) {
                    var xhr = new XMLHttpRequest ();
                    xhr.open ("GET", name);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) res.innerHTML = xhr.responseText;
                    }
                    xhr.send ();
                },
                f      = function () {
                    include (this.dataset["file"]);
                };
            [].forEach.call (btns, function (e) { e.addEventListener ("click", f); });
        }
        window.addEventListener ("load", function () {
            includeFile ("#result");
        });
HTML5
1
2
3
4
5
6
7
8
    <div>
        <!--<div data-file="АДРЕС ФАЙЛА">загрузить файл 1</div>-->
        <div data-file="p2.html">загрузить файл 2</div>
        <div data-file="p3.html">загрузить файл 3</div>
        <div data-file="files/p4.html">загрузить файл 4</div>
    </div>
    <div id="result">__</div>
    <!--<div id="result">БЛОК ВЫВОДА РЕЗУЛЬТАТА</div>-->
только придется на сервер закинуть все это, иначе не взлетит...
0
DronNaTrone
0 / 0 / 0
Регистрация: 25.10.2014
Сообщений: 8
12.01.2016, 17:56  [ТС] #3
может я плохо объяснил проблему.
есть меню которое находится в блоке div ссылочного типа:

<li><a href="#">SomeInfomation_1</a></li>
<li><a href="#">SomeInfomation_2</a></li>
<li><a href="#">SomeInfomation_3</a></li>

на каждую ссылку имеется соответствующий файл SomeInfomation_1.html, SomeInfomation_2.html, SomeInfomation_3.html
есть другой div блок на той же странице рядом с блоком меню, он пустой:

<div id="result"></div>

нужно что бы при нажатии ссылки меню, содержимое простого html перемещалось в блок div id="result", при нажатии другой ссылки блок div id="result" очищался/заменялся на содержимое другого простого html файла. Я не очень люблю/разбираюсь в JavaScript но мне казалось что это в одну строчку должно делаться.
0
arcmag
259 / 255 / 115
Регистрация: 27.06.2014
Сообщений: 665
12.01.2016, 20:18 #4

Цитата Сообщение от DronNaTrone Посмотреть сообщение
нужно что бы при нажатии ссылки меню, содержимое простого html перемещалось в блок div id="result", при нажатии другой ссылки блок div id="result" очищался/заменялся на содержимое другого простого html файла.
ну так я вам такой код для этого и дал, только вместо ссылок кликать надо по блокам <div> где в атрибуте data-file указывается адрес вашего html файла содержимое которого будет грузится в блок id="result" (можете и тег <a> использовать главное что бы был атрибут data-file)
HTML5
1
<a data-file="p2.html">загрузить файл 2</a>
Цитата Сообщение от DronNaTrone Посмотреть сообщение
Я не очень люблю/разбираюсь в JavaScript но мне казалось что это в одну строчку должно делаться.
может и делается, я вам сам написал этот скрипт если не нравится пишите сами, можете попробовать покопаться в jQuery там по моему есть возможность в "одну строчку" написать (хотя тащить только ради такой фигни эту библиотеку как мне кажется не оч...)
1
DronNaTrone
0 / 0 / 0
Регистрация: 25.10.2014
Сообщений: 8
13.01.2016, 15:44  [ТС] #5
никак ума не приложу как заменить мой вид ссылки
<li><a href="#">SomeInfomation_1</a></li>
на ваш
<a data-file="p2.html">загрузить файл 2</a>
он не кликабелен

Добавлено через 20 минут
если есть функция можно ли привести к виду
<a href="javascript:somefuction()">
с атрибутом имени файла или типа того. извините может вопросы тупые, но какой вопрос такой и хозяин

Добавлено через 18 часов 25 минут
решение

Javascript
1
2
3
4
5
6
7
8
<script type="text/javascript">
function getCont(url){
    $('#result').html();
    $.get(url,function(data){
            $('#result').html(data);
    });
};
</script>
HTML5
1
2
3
4
<a href="#" onclick="getCont('SomeInfomation_1.html');return false;">SomeInfomation_1</a>
<a href="#" onclick="getCont('SomeInfomation_2.html');return false;">SomeInfomation_2</a>
<a href="#" onclick="getCont('SomeInfomation_3.html');return false;">SomeInfomation_3</a>
<div id="result">тут результат клика</div>
2 arcmag, спасибо за помощь.
0
13.01.2016, 15:44
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.01.2016, 15:44
Привет! Вот еще темы с ответами:

Сворачивание и разворачивание блока div - JavaScript
Ребят, нужна помощь, в Ява я слабак. Это в head. &lt;script type=&quot;text/javascript&quot; &gt; function blockPP(){ ...

Заполнение блока контентом - JavaScript
Всем доброго времени суток! Всё же тяжело мне с php переходить на js к слову, не могу справиться с кое какой задачей: нужно чтобы при клике...

Появление блока div при нажатии на ссылку - JavaScript
Доброго времени суток, помогите доделать функцию. Имеется функция, открывающая блок Div, нужно сделать так, чтобы при повторном нажатии на...

Как скрыть скрипт внутри блока div - JavaScript
как скрыть скрипт внутри блока div? всю башку сломал помогите $(function(){ $('#banner_top').click(function(){ $(this).animate( ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.