Issues with fully loading an external html file

Question

I am having some issues fully loading an html file into my div. After reading though different questions here I realized that I should use an iframe instead of trying to mess around with divs, ajax, or JS. This has served me well, however, upon loading it returns the page though in a scroll box as so:

how can I solve this issue?

Code snippets below:

This part comes from the index.html:

<div class="blurbs" id="blurbs">
        <iframe id = "frame" width="100%" height="100%" frameborder="0" ></iframe>
    </div>

the rest comes from the january html file which is a large one that just contains all that information so i am uncertain if y'all need to see it as I doubt it has anything to do with this.

this here is the javascript that is called when January is clicked:

function load_january() {

    var ajaxCall = document.getElementById("frame");
    ajaxCall.setAttribute("src", "../HTML/months/january.html");
}

So you're trying to [hide the scrollbar](http://stackoverflow.com/questions/4856746/hide-horizontal-scrollbar-on-an-iframe)? — Obsidian Age, Mar 05 '17 at 21:19
I would like to, yes, also would like to have the entire html load into the iframe. So really it is still part of how to correctly load an html file from a preexisting file. Somewhat like ajax. — SomeStudent, Mar 05 '17 at 21:20
If I understand you correctly it's loading the html file without its styles. So you should check if the html file you are trying to load as it's styling properly linked. — Oke Tega, Mar 05 '17 at 21:21
Well, i am not too concerned about styling, more so about just having the whole contents of that file be loaded into my iframe/div — SomeStudent, Mar 05 '17 at 21:22

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

I think you are interested in resizing the iframe height to match the height of the source HTML. This way you won't see the scrollbar.

This problem has been solved here: Adjust width height of iframe to fit with content in it

edited May 23 '17 at 12:09

Community

1
1

answered Mar 05 '17 at 21:28

Tim Hysniu

1,446
13
24

I believe so, yeah, how would I reference that javascript? Should I nest it in my load_january method? Stand alone function? – SomeStudent Mar 05 '17 at 21:34

score 0 · Answer 2 · answered Mar 05 '17 at 21:50

So i got around this by using a div instead, and calling an ajax function. Iframes are too much of a hassle with my knowledge level of CSS at this time.

 $(document).ready(function() {
        $("#jan").click(function () {
            $.ajax({
                url: "../HTML/months/january.html", success: function (result) {
                    $("#blurb").html(result);
                }
            });
        });
    });

Issues with fully loading an external html file

2 Answers2