Display full length of document for embed google document

问题

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.

回答1:

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.

回答2:

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?

来源：https://stackoverflow.com/questions/49566806/display-full-length-of-document-for-embed-google-document

标签

javascript

html

google-docs