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:
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';
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();
}
What is the problem with the object tag and how can this be solved? Thanks in advance!