innerHTML doesn't fill parent

StackOverflow https://stackoverflow.com/questions/22976515

Вопрос

I'm trying to load an html page inside a div. It works well, except that the "loaded" page only fills a small portion of the parent.

This is the function that loads the HTML:

function load_inner() {
    Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
}

The div that is to be filled is 500*200px.

The page that is loaded is supposed to fill the parent, but in this case the inner div is set to 1000*500px for testing purposes (the parent has the overflow property set to hidden).

This is the page that loads the content (everything is surrounded by the html tag):

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.23.1" />
    <style type="text/css">
        #Content { width:500px; height:200px; background:orange; overflow:hidden;}
    </style>
    <script type="text/javascript">
        function load_inner() { 
            Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
        }
    </script>
</head>

<body onload="load_inner()">
    <div id="Content"></div>
</body>

This is the page that is loaded (everything is surrounded by the html tag):

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
    <style type="text/css">
        #Cont { background:yellow; }
        body { margin:0px; padding:0px; }
    </style>
</head>

<body>
    <div id="Cont">
        <span>IM A TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST</span>
    </div>
</body>

And this is the result:

Bad result

I've made some tests and it seems that this only happens with the object tag.

This works ok (the content is not "limited"):

Content.innerHTML='g...g';

String set directly

If I send a GET request to the target page and set the innerHTML to the "responseText" it displays correctly:

function load_home() {         
     var url = "http://localhost/inner_load/page_test.html";
     var method = "GET";
     var async = true;
     var request = new XMLHttpRequest();
     request.onload = function () {
        var data = request.responseText;
        Content.innerHTML=request.responseText;
     }
     request.open(method, url, async);
     request.send();
  }

Loaded via http request

What is the problem with the object tag and how can this be solved? Thanks in advance!

Это было полезно?

Решение

If you set the width of the object to 100% that 100% reflects the width of the parent div (orange) not the content that is loaded - so you are loading a 1000px div into a 500px (100% of its parent) object tag. If you do not want scroll bars you need to size the object to be the same size as the content you are loading into it ie 1000px. So the answer is that there is nothing wrong with the object tag.

example:

  <div id="content"> //500px
    <object> //at 100% it is also 500px
       <div>Loaded content</div> //this is 1000px and hence the scrollbar on a parent object
    </object>
</div>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top