Question

我看过很多帖子都有类似的问题，但没有一个我正在使用的div结构。我正在构建一个带有导航侧边栏的页面，其中包含使用innerHTML函数的按钮，用不同的HTML页面填充内容div。我有包装类和内容类，使用内容类调用HTML进行格式化。

由于某种原因，当通过JavaScript调用时，HTML只填充内容包装器的一小部分。但是，当我从调用的HTML文件中复制div并将其直接粘贴到索引文件中的内容包装器时，我没有这个问题。发生了什么会导致innerHTML功能限制被调用div的宽度/高度？

以下是索引文件中侧边栏/内容HTML的示例：

<div class="sidebar_wrapper">
    <div class="sidebar">
            <p><button type="button" onclick="load_bookings();">Manage Bookings</button></p>
    </div>
</div>

<div id="content" class="content_wrapper">
</div>

以下是索引文件中JavaScript函数的示例：

<script>
    function load_bookings() {
        document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html" ></object>';
    }
</script>

以下是从bookings_home.html

加载的HTML示例

<div class="content">
    <p align="center">Manage bookings</p>
</div>

以下是CSS文件中引用的四个类：

.sidebar_wrapper {
    width: 160px;
    height: 100%;
    float: left;
    opacity: 1;
    background: linear-gradient(to right, rgba(249,237,7,1) 0%,rgba(252,247,142,0.7) 50%,rgba(255,255,255,0) 100%);
    /*<!--background-color: rgb(249,237,7);*/
    padding: 0;
    margin: 0;
}

.sidebar {
    top: 11px;
    float: left;
    text-align: center;
    margin: 20px;
    height: 85%;
}

.content_wrapper {
    overflow: scroll;
    background-color: white;
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0;
}

.content {
    overflow: scroll;
    color: black;
    background-color: green;
    height: 100%;
    width: 100%;
}

外观如何：

Actual result

当我将相同的div直接放在索引文件中时，它应该如何显示以及它是如何工作的：

Expected result

更新＃1

以下是index.html的完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<link type="text/css" rel="stylesheet" href=style.css>
</head>
<body>
<script>
function load_bookings() {
        document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html" ></object>';
    }
</script>

<div class="sidebar_wrapper">
    <div class="sidebar">
            <p><button type="button" onclick="load_bookings();">Manage Bookings</button></p>
    </div>      
</div>

<div id="content" class="content_wrapper">
    <div class="content">
    </div>
</div>

</body>
</html>

以下是内容html文件的完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href=style.css>
</head>
<body>
<div class="content">
<p align="center">Manage bookings</p>
</div>
</body>
</html>

以下是.css文件的完整代码：

html {
height: 100%;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
.sidebar_wrapper {
width: 160px;
height: 100%;
float: left;
opacity: 1;
background: linear-gradient(to right, rgba(249,237,7,1) 0%,rgba(252,247,142,0.7) 50%,rgba(255,255,255,0) 100%);
padding: 0;
margin: 0;
}

.sidebar {
top: 11px;
float: left;
text-align: center;
margin: 20px;
height: 85%;
}

.content_wrapper {
overflow: scroll;
background-color: white;
height: 100%;
width: auto;
margin: 0;
padding: 0; 
}

.content {
overflow: scroll;
color: black;
background-color: green;
height: 100%;
width: 100%;
}

Answer 1

我尝试了一个示例JS FIddle，如果您在html代码之前调用脚本，它可以正常工作。试着这样说：

<script>
    function load_bookings() {
        document.getElementById("content").getElementsByClassName('content')[0].innerHTML='<object type="text/html" data="bookings_home.html" ></object>';
    }
</script>

在此之前：

<div class="sidebar_wrapper">
    <div class="sidebar">
            <p><button type="button" onclick="load_bookings();">Manage Bookings</button></p>
    </div>
</div>

<div id="content" class="content_wrapper">
</div>

Answer 2

也许是因为你在作业陈述中混淆了引文。

当你说：

document.getElementById("content").innerHTML='<object type="text/html" data="bookings_home.html" ></object>';

问题在于你用单引号（＆＃39;）声明，并且在同一个语句中你有一些双引号（＆＃34;）可能会混淆浏览器。

对双引号使用转义字符:(反斜杠）

执行以下操作：

document.getElementById("content").innerHTML = "<object type=\"text/html\" data=\"bookings_home.html\" ></object>";

为什么innerHTML函数没有填充我的div？

2 个答案: