insert a html as an object into html without scrollbar

Question

What I want to do is to edit text in word and save it as text.html then insert the text.html file in my main.html. My requirement is that in the main.html file, the text should:

have formatting
be able to show full content
be adjustable to the page size
not have scrollbars

My text is :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus est a pulvinar luctus. Proin aliquet cursus turpis, in hendrerit magna porta vel. Mauris scelerisque scelerisque euismod. Donec dignissim lacinia leo, in 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.

Or it can be anything. The point is to copy this text to word and save it as text.html, then my main.html will call it.

My main.html file is :

<html>
  <body>
    <object type="text/html" data="text.html" style="width:100%"></object>
    <p> this is a test </p>
  </body>
</html>

For some reason, it doesn't work properly. Any ideas?

I just edited the question, hopefully it'r more clear now. BTW, it's fully reproducible. — Arthur
I have just done it and it works properly... following the same steps. — Fab
@Fabio if you have a solution, post it as an answer so that OP can attempt to follow your steps. — Alex
overflow and scrolling are not attributes of the object tag. See here for reference. You have to put these in the style attribute to make it work — Lelio Faieta

agrm agrm · Accepted Answer · 2018-06-05T18:52:51

First off, the <object> element has no overflow or scrolling attributes. <iframe> elements had the scrolling attribute, but this is deprecated in HTML5.

For the following solution, this markup will do:

<object class="text" data="text.html" type="text/html"></object>

And to modify its width and height, I'd recommend you separate your CSS into a separate style block (or stylesheet):

<style>
    .text {
        width: 400px;
        min-height: 100px;
    }
</style>

Hiding the scrollbar is a bit trickier as the scrollbar is inside the embedded HTML page. This means no HTML attribute or CSS property you declare in the parent page (main.html) will be able to hide the scrollbars in the child page (text.html). You may, however, access the DOM of the embedded page by using javascript:

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

    console.log( embeddedDocument.documentElement )
}

Now you can disable scrolling on the <html> and <body> elements of text.html. Note the <html> tag is accessed by referencing documentElement:

embeddedDocument.documentElement.style.overflow = 'hidden';
embeddedDocument.body.style.overflow = 'hidden';

And if you want to resize the height of the whole <object> element based on the contents in text.html you set its height to match the offsetHeight of the <body> element in text.html:

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

So your whole code will look like this:

<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>

The snippets here at StackOverflow is a bit limited when it comes to embedding files, but you can test the above code in this CodeSandbox.

insert a html as an object into html without scrollbar

1 Answers