时间戳

首页 > 解决方案 > 将 html 作为对象插入到没有滚动条的 html 中

javascript - 将 html 作为对象插入到没有滚动条的 html 中

问题描述

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

  1. 有格式
  2. 能够显示完整的内容
  3. 可根据页面大小进行调整
  4. 没有滚动条

我的文字是：

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

Lorem ipsum dolor sit amet , consectetur adipiscing elit。Duis luctus est a pulvinar luctus。Proin aliquet cursus turpis，在 hendrerit magna porta vel 中。Mauris scelerisque scelerisque euismod。Donec dignissim lacinia leo，在euismod justo。Donec ut ligula non dui ornare vehicula。Etiam massa augue, venenatis sit amet egestas ac, dapibus eu sapien。In 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>

由于某种原因，它无法正常工作。有任何想法吗？

标签： javascripthtmlcss

解决方案

首先，该<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>现在您可以禁用 . 的和<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;

因此，您的整个代码将如下所示：

<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中测试上述代码。

推荐阅读