将html作为对象插入到没有滚动条的html中。
我想要做的是编辑word中的文本，并将其保存为text.html，然后在我的main.html中插入text.html文件。我的要求是，在main.html文件中，文本应该：
- 有格式
- 能够显示全部内容
- 可调整到页面大小
- 没有滚动条
我的案文是：
Lorem ipsum dolor，，consectetur adipiscing elit.最重要的是一只大葡萄胎。这是一种名为“大天使”的作品。[医]毛里氏白杨；国家政要莱辛利奥，在欧洲法院。非酒后车辆。阿蒂姆·马萨·阿古格，文奈蒂坐在一起，大比索。在刺参中的含量。
Lorem ipsum dolor，，consectetur adipiscing elit.最重要的是一只大葡萄胎。这是一种名为“大天使”的作品。[医]毛里氏白杨；国家政要莱辛利奥，在欧洲法院。非酒后车辆。阿蒂姆·马萨·阿古格，文奈蒂坐在一起，大比索。在刺参中的含量。
也可以是任何东西。重点是将文本复制到word，并将其保存为text.html，然后我的main.html将调用它。
我的main.html文件是：
<html>
<body>
<object type="text/html" data="text.html" style="width:100%"></object>
<p> this is a test </p>
</body>
</html>因为某种原因，它不能正常工作。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2018-06-05 18:52:51
首先，<object>元素没有overflow或scrolling属性。<iframe>元素具有scrolling属性，但这在HTML5中是不可取的。
对于以下解决方案，此标记将执行以下操作：
<object class="text" data="text.html" type="text/html"></object>为了修改它的宽度和高度，我建议您将CSS分离成一个单独的样式块(或样式表)：
<style>
.text {
width: 400px;
min-height: 100px;
}
</style>隐藏滚动条有点棘手，因为滚动条位于嵌入的HTML页面中。这意味着在父页面(main.html)中声明的HTML属性或CSS属性将无法隐藏子页面(text.html)中的滚动条。但是，您可以使用javascript访问嵌入页面的DOM：
window.onload = function() {
var object = document.querySelector('.text');
var embeddedDocument = object.contentDocument;
console.log( embeddedDocument.documentElement )
}现在，您可以在<html>和<body>元素text.html上禁用滚动。注<html>标记是通过引用documentElement来访问的。
embeddedDocument.documentElement.style.overflow = 'hidden';
embeddedDocument.body.style.overflow = 'hidden';如果要根据<object>中的内容调整整个text.html元素的高度，则将其高度设置为与text.html中的<body>元素的offsetHeight匹配。
var contentsHeight = embeddedDocument.body.offsetHeight;
object.height = contentsHeight;所以您的整个代码将如下所示：
<style>
.text {
width: 400px;
min-height: 100px;
}
</style>
<object class="text" data="text.html" type="text/html"></object>
<script>
window.onload = function () {
var object = document.querySelector('.text');
var doc = object.contentDocument;
doc.documentElement.style.overflow = 'hidden';
doc.body.style.overflow = 'hidden';
var contentsHeight = doc.documentElement.offsetHeight;
object.height = contentsHeight;
}
</script>在StackOverflow这里的代码片段在嵌入文件方面有点有限，但是您可以在这个CodeSandbox中测试上面的代码。
https://stackoverflow.com/questions/50703997
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号