Как загрузить страницу в div с помощью innerHtml и javascript

Я пытаюсь изменить содержимое div, когда нажимаю ссылку в другом div. Я использовал функцию javascript:

function load_home(){
    document.getElementById("content").innerHTML='<object type="type/html" data="home.html"  ></object>';
}

Однако страница, загружаемая в div 'content', отображается в виде небольшого прокручиваемого поля. Размер div 'content' фиксирован и занимает ту часть страницы, которую я хочу. Любая идея, как я могу изменить размер загружаемого окна?


javascript html innerhtml
person Saksham Arora    schedule 11.03.2015    source источник
comment
Пожалуйста, сделайте отступ в коде и отформатируйте его   -  person    schedule 11.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Ну, вы можете определить высоту тега объекта следующим образом

<object type="type/html" data="home.html" height="1000"></object>

Но это также будет статично.

Вы также можете использовать iframe вместо object, но iframe также будет иметь статическую высоту.

<iframe src="home.html" height="1000"></iframe>

Чтобы высота вашего div зависела от контента, вы должны получить контент через вызов AJAX и вставить его в div с помощью Javascript, как это было предложено @Chris. А для выполнения вызовов AJAX и выполнения манипуляций с HTML с помощью Javascript я бы предложил использовать Jquery (если вы не используете и другую среду JS) (ссылка: http://api.jquery.com/jquery.ajax/, http://www.w3schools.com/jquery/ajax_ajax.asp).

Затем вы можете сделать что-то вроде:

$.ajax({
    url: 'home.html',
    success: function(data) {
        $('#content').html(data);  // assuming div#content has a auto height
    }
})

Кроме того, вам необходимо убедиться, что «home.html» возвращает только отображаемый контент (как HTML), а не полную HTML-страницу (т. Е. Он не должен иметь тегов html и body, он должен иметь только внутреннее содержимое тега body).

person Debanshu Kundu    schedule 11.03.2015