LINUX.ORG.RU
Форум — Web-development  

Отображение различного контента в одном блоке DIV.

 ,


0

1

Здравствуйте! Столкнулся при написании сайта с такой задачей, что необходимо отображать различный контент в блоке. Нашел одно решение через iframe и js, код ниже.

js 

<script  type="text/javascript">
    function changeBlock(id) {
       document.getElementById('content').innerHTML = '<iframe width="700" height="900" src="http://localhost/'+id+'" frameborder="0" allowfullscreen></iframe>';
    }
</script>
html 
.....
<a href="/news" class="button" onclick="changeBlock('news'); return false;">Последние</a> 
....
<div id="content">
<h2 align="center">Последние новости</h2>
.....
</div>
Все работает как надо, есть только одно но, iframe имеет фиксированную длину и высоту, а контент бывает высотой и 200, и 800, и даже 50. Пока не нашел работающего решения, может кто подскажет, если сталкивался.

← Отношения разных IDE к классам, не подключенным явно
генерировать UI из JSON/YAML →

Код для фрейма формируется целиком функцией changeBlock, почему бы не подставлять там нужную высоту, передавая ее в функцию как параметр?

Вообще в 2017 всё это обычно делается иначе, контент подгружают с помощью ajax, например.

sholom ★
()

Сегодня такую задачу решают с помощью ajax/websockets.
А iframes могут вообще блокироваться всякими Adblock'ами.

blackst0ne ★★★★★
()
Ответ на: комментарий от blackst0ne

Не встречал такого что-бы вообще все айфрэймы блокировались. NoScript (при некоторых настройках) блокирует фрэймы с недоверенных доменов, но фрэйм можно разрешить просто кликнув по нему.

Вообще задача как-то непонятно сформулирована. Сейчас не очевидно почему <div><div>различный</div><div>контент</div></div> это не решение (:

P.S. а ещё iframe это такой-же замещаемый элемент страницы как img, так-что с ним можно делать все те-же респонсив штуки. Хотя в 2017 наверное так уже не делают (:

MrClon ★★★★★
()
Последнее исправление: MrClon (всего исправлений: 1)
Ответ на: комментарий от MrClon

Смысл в динамическом отображении контента без перезагрузки. Вот есть меню: 

<a class="menu" href="#">Категории</a>

			  <div class="link large" href="#">
				<span class="active"><i class="icon-twitter"></i>Главные новости</span>
				<ul class="hover-bot">
				  <a href="/news" class="button" onclick="changeBlock('news'); return false;">Последние</a> 
				  <a href="/news" class="button" onclick="changeBlock('news'); return false;">Предпоследние</a>
				</ul>
				<ul class="hover-top">
				  <a href="/news" class="button" onclick="changeBlock('news'); return false;">Новые</a> 
				  <a href="/news" class="button" onclick="changeBlock('news'); return false;">Старые</a>
				</ul>
			  </div>
Вот есть блок для отображения 
		<div id="content">
			<h2 align="center">Последние новости</h2>
				.......НЕОБХОДИМО ЧТОБЫ ТУТ ПОЯВЛЯЛСЯ КОНТЕНТ....
		</div>
Контент должен появляться при нажатии на кнопку меню, но страница не должна перезагружаться.

AnonimS
() автор топика
Ответ на: комментарий от sholom

Кажется я понял идею как реализовать через ajax. Получается достаточно такого скрипта 

<script>
    function show()
    {
        $.ajax({
            url: "run.php",
            cache: false,
            success: function(html){
                $("#content").html(html);
            }
        });
    }

    $(document).ready(function(){
        show();
        setInterval('show()',1000);
    });
</script>

А в run.php написать, что тогда, не совсем понимаю..

AnonimS
() автор топика
Ответ на: комментарий от AnonimS

Надо же при нажатии, наверно так 

<script>
$("#btn").click(
    function show()
    {
        $.ajax({
            url: "run.php",
            cache: false,
            success: function(html){
                $("#content").html(html);
            }
        });
    }

    $(document).ready(function(){
        show();
        setInterval('show()',1000);
    });
);
</script>
Правильно?

AnonimS
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Отношения разных IDE к классам, не подключенным явно
Web-development
генерировать UI из JSON/YAML →