Display full length of document for embed google document

Question

How can I display the full length of an embedded google document without the scroll bar on the iframe?

<html>
<style>
    body { margin: 0; padding: 0; o}
    iframe { margin-left: 2vw; margin-top: 2vh; height: 100%; width: 90vw; }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>

<iframe srcdoc="" frameborder="0" scrolling="no" height="100%"></iframe>

    <script>
        $(function() {
            $.get("https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true", function(html) {
                var contents = $("iframe").contents();

                contents.find("html").html(html);

                setTimeout(function() {
                    contents.find('a[href^="http://"]').attr("target", "_blank");
                    contents.find('a[href^="https://"]').attr("target", "_blank");
                }, 1000); // Actually not sure if timeout is required here...
            });
        });
    </script>
</body>
</html>

The display shows maybe a page and half of text and stops.

Maybe related: [Make iframe automatically adjust height according to the contents without using scrollbar?](https://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using) — Mikey, Mar 30 '18 at 01:46

score 3 · Answer 1 · answered Dec 29 '18 at 00:01

Google docs is currently happy to serve published documents via CORS requests.

This means that you don't need an iframe to embed your documents. You can instead use an XMLHttpRequest to GET your document and put the response inside a div's innerHtml.

score 2 · Answer 2 · answered Dec 29 '18 at 00:45

You don't actually even need to make a GET request to accomplish your requirement. If all you're wanting to do is display the full length of the document without having to have a scroll bar, you can use an <embed /> tag with some css.

<embed src="https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true" width="100%" style="height: -webkit-fill-available">

When simply added to an HTML page, it will set the height to the full height of the contents of the document, so the only scroll bar you'll have is the scroll bar that is on the browser to scroll down the length of the document. Does this get you what you need?

Thank you so much! Exactly what I needed! – Gurpreet Singh Matharoo May 27 '20 at 08:48 — Gurpreet Singh Matharoo, May 27 '20 at 08:48

Display full length of document for embed google document

2 Answers2

Linked