获取<object data="url.html">的style.height，并将其设置为该对象的style.height
获取<object data="url.html">的style.height，并将其设置为该对象的style.height
提问于 2019-09-02 04:34:13
我有两栏。
列1保存了我的导航。
第2栏保存了我的内容。
每当有人使用导航时，我就使用对象的getElementByID和setAttribute('data','url')。
我的问题是标记<object>不支持css中的“高度:100%”，所以我尝试使用javascript获取html文件的innerHeight，并将其设置为style.height。
不确定这是否是正确的方法，或者是否有其他方法在<object>中加载html文件并显示内容的完整高度。
<body onload="load_a()">
<section class="grid-layout">
<div id="nav-panel">
<ul>
<li>
<a href ="#" onclick="load_a()">
<p>A</p>
</a>
</li>
<li>
<a href ="#" onclick="load_b()">
<p>B</p>
</a>
</li>
</ul>
</div>
</section>
<section class="grid-layout">
<div id="content-panel">
<object onloadstart="object_height" id="content" type="text/html"></object>
</div>
</section>
</body>
<script>
function object_height(){
var contentHeight = document.getElementById("content");
document.getElementById("content").style.height = contentHeight.innerHeight;
}
function load_a(){
document.getElementById("content").setAttribute('data', 'a.html');
}
function load_b(){
document.getElementById("content").setAttribute('data', 'b.html');
}
</script>不管怎么说，当我单击导航A时，容器加载a.html，当我单击导航B时，容器加载b.html。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-02 05:01:38
如果您的外部文件位于上--相同的域--您可以访问您的内容文档并从中获取其维度。
const obj = document.getElementById('YOUR_OBJECT');
obj.onload = e => {
const doc = obj.contentDocument;
obj.width = doc.documentElement.offsetWidth;
obj.height = doc.documentElement.offsetHeight;
};像小提琴一样，因为StackSnippet的空源帧从来都不是相同的域。
如果您的外部文件位于不同的域中，但控制它们的内容，则可以通过postMessage方法传递此信息。
const obj = document.getElementById('obj');
window.addEventListener('message', (evt) => {
const msg = evt.data;
console.log(evt);
// a simple check to be sure we are talking to #obj's content
if(msg.type === "set-size") {
obj.width = msg.width;
obj.height = msg.height;
}
});
const frame_content = `<!DOCTYPE html>
<html>
<head>
<style>
html {height: 2800px; width: 500px; background: ivory }
</style>
</head>
<body>
Hello
<script>
parent.postMessage({
type: 'set-size',
width: document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}, '*');
<\/script>
</body>
</html>`;
obj.data = URL.createObjectURL(new Blob([frame_content], { type: 'text/html'}))#obj {
border: 1px solid;
}<object id="obj" ></object>
如果您的外部文件位于不同的域中，但您无法控制它们的内容，则您将陷入困境。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57751472
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号