gpt4 book ai didi

javascript - innerHTML 不填充父级

转载 作者:行者123 更新时间:2023-11-30 17:31:31 26 4
gpt4 key购买 nike

我正在尝试在一个 div 中加载一个 html 页面。它运行良好,除了“已加载”页面仅填充父页面的一小部分。

这是加载 HTML 的函数:

function load_inner() {
Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
}

要填充的div为500*200px。

加载的页面应该填充父级,但在这种情况下,inner div 被设置为 1000*500px 用于测试目的(父级有 overflow 属性设置为隐藏)。

这是加载内容的页面(所有内容都被 html 标记包围):

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
<style type="text/css">
#Content { width:500px; height:200px; background:orange; overflow:hidden;}
</style>
<script type="text/javascript">
function load_inner() {
Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
}
</script>
</head>

<body onload="load_inner()">
<div id="Content"></div>
</body>

这是加载的页面(所有内容都被 html 标记包围):

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
<style type="text/css">
#Cont { background:yellow; }
body { margin:0px; padding:0px; }
</style>
</head>

<body>
<div id="Cont">
<span>IM A TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST</span>
</div>
</body>

这是结果:

Bad result

我做了一些测试,似乎这只发生在 object 标签上。

这可以正常工作(内容不是“受限的”):

Content.innerHTML='g...g';

String set directly

如果我向目标页面发送 GET 请求并将 innerHTML 设置为它正确显示的“responseText”:

function load_home() {         
var url = "http://localhost/inner_load/page_test.html";
var method = "GET";
var async = true;
var request = new XMLHttpRequest();
request.onload = function () {
var data = request.responseText;
Content.innerHTML=request.responseText;
}
request.open(method, url, async);
request.send();
}

Loaded via http request

object 标签有什么问题,如何解决?提前致谢!

最佳答案

如果您将对象的宽度设置为 100%,则 100% 反射(reflect)的是父 div(橙色)的宽度,而不是加载的内容 - 因此您将 1000px 的 div 加载到 500px(其父 div 的 100% ) 对象标记。如果您不想要滚动条,您需要将对象的大小调整为与您正在加载的内容相同的大小,即 1000 像素。所以答案是object标签没有问题。

例子:

  <div id="content"> //500px
<object> //at 100% it is also 500px
<div>Loaded content</div> //this is 1000px and hence the scrollbar on a parent object
</object>
</div>

关于javascript - innerHTML 不填充父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22976515/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com