Question

I am displaying an HTML page within another HTML page depending on which link is selected using the following function:

function loadProject(sel) {
    var url = sel[sel.selectedIndex].value;

    if(url) {
        document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
    } else {
        document.getElementById('projectContainer').innerHTML = "Please select a project.";
    }
}

And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn’t be – even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:

object {
    width: 100%; 
    border: none;
    overflow: hidden;
}

but that is not accomplishing what I’m looking for. Any suggestions? Thanks.

Answer 1

Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.

You need to declare overflow: hidden for the body inside the document you are embedding.