Question

我想要做的是编辑单词中的文本并将其另存为text.html，然后将text.html文件插入我的main.html。我的要求是在main.html文件中，文本应该：

有格式
能够显示完整内容
可调整为页面大小
没有滚动条

我的文字是：

Lorem ipsum dolor sit amet ，consectetur adipiscing elit。 Duis luctus est a pulvinar luctus。 Proin aliquet cursus turpis，in herererit magna porta vel。 Mauris scelerisque scelerisque euismod。 Donec dignissim lacinia leo，在euismod justo。 Donec ut ligula non dui ornare vehicula。 Etiam massa augue，venenatis坐在amet egestas ac，dapibus eu sapien。 在ac sapien quis enim suscipit finibus。 Proin ut pretium arcu，vel mattis purus。

或者它可以是任何东西。关键是要将此文本复制到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>

出于某种原因，它无法正常工作。有什么想法吗？

Answer 1

首先，<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页面内，因此隐藏滚动条有点棘手。这意味着您在父页面中声明的HTML属性或CSS属性（main.html）将无法隐藏子页面中的滚动条（text.html）。但是，您可以使用javascript：

访问嵌入页面的DOM

window.onload = function() {
    var object = document.querySelector('.text');
    var embeddedDocument = object.contentDocument;

    console.log( embeddedDocument.documentElement )
}

现在，您可以在<html>的{{1}}和<body>元素上停用滚动功能。请注意，text.html标记是通过引用<html>：

来访问的

documentElement

如果您想根据embeddedDocument.documentElement.style.overflow = 'hidden'; embeddedDocument.body.style.overflow = 'hidden';中的内容调整整个<object>元素的高度，请将其高度设置为与text.html元素的offsetHeight相匹配在<body>：

text.html

所以你的整个代码看起来像这样：

var contentsHeight = embeddedDocument.body.offsetHeight;
object.height = contentsHeight;

StackOverflow的片段在嵌入文件时有点受限，但您可以在CodeSandbox中测试上述代码。

将html作为对象插入html而不使用滚动条

1 个答案: