gpt4 book ai didi

javascript - 如何在另一个页面中突破一个对象框?

转载 作者:行者123 更新时间:2023-11-28 05:14:53 24 4
gpt4 key购买 nike

目前,我正在开发一个使用各种框架来显示内容的网站。一个框架由一个可折叠菜单组成,它需要比实际框架提供的更多空间。是否可以在不调整所有页面的情况下突破特定的框架宽度?我不想使用滚动条,我已经在使用 z-indexes。

例如,我包含两个页面:index.html 和 includedpage.html。在这种情况下,我希望在不调整 index.html 并且不看到滚动条的情况下看到文本。

index.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: green;
}

</style>
</head>
<body>

<object data="includedpage.html" width="100%" height="150"></object>

</body>
</html>

Includedpage.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html{
overflow: hidden;
}
body {
background-color: yellow;
}

#content_need_to_displayed{
margin-top: 150px;
}
</style>
</head>
<body>

<div id="content_need_to_displayed">
Test
</div>
</body>
</html>

最佳答案

您需要一个更大的高度值,例如:185

<object data="includedpage.html" width="100%" height="185"></object>

margin-top + text(font-size) + default user agent body margin ( top+bottom )= 150 + 18.5 + 16px (on Chrome)~=185px

或者你可以使用百分比

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: green;
}
body,html{
height:100%
}


</style>
</head>
<body>

<object data="Includedpage.html" width="100%" height="100%"></object>

</body>
</html>

js解决方案

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: green;
margin: 0px;
padding: 0px;
}
</style>
</head>

<body>

<object id="mypage" data="includedpage.html" width="100%"></object>
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body,
html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}

function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument :
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight(doc) + 4 + "px";
ifrm.style.visibility = 'visible';
}

document.getElementById('mypage').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>
</body>

</html>

关于javascript - 如何在另一个页面中突破一个对象框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39368122/

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