如何使用innerHtml和javascript在div中加载页面[重复]答案

【问题标题】：How to load a page in a div using innerHtml and javascript [duplicate]如何使用innerHtml和javascript在div中加载页面[重复]
【发布时间】：2015-05-12 20:19:19
【问题描述】：

当我单击另一个 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

【解决方案1】：

你可以像这样定义对象标签的高度

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

但这也是静态的。

您也可以使用 iframe 代替 object，但 iframe 也将具有静态高度。

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

要使您的 div 的高度取决于您通过 AJAX 调用获取内容的内容，并按照@Chris 的建议使用 Javascript 将其插入到 div 中。为了使用 Javascript 进行 AJAX 调用和 HTML 操作，我建议使用 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标签的内部内容。

【讨论】：