I was attempting this in an iframe previously, but now I have managed to make it work in a DIV. However, I am facing issues in achieving the desired properties.
When I try to modify the properties of the 'siteloader', it seems to ignore the embedded website, preventing me from changing its width and height to 100%. I can only adjust the background of the 'siteloader' div for now.
I have included all of my code along with a screenshot for reference
CSS
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
body {
background: #000;
margin: 0;
}
#siteloader {
background: white;
width:100%;
height:100%;
border:none;
position:fixed;
top:0px;
marginwidth:0;
hspace:0;
vspace:0;
z-index: ;
}
</style>
HTML
<body>
<div id="siteloader">
<script>
var page, randomcontent=new Array()
randomcontent[0]="http://sandberg.nl/manifesto"
randomcontent[1]="http://wikipedia.org"
randomcontent[2]="http://iamsterdam.com"
randomcontent[3]="http://therevolvinginternet.com/"
page = randomcontent[Math.floor(Math.random()*randomcontent.length)]
$("#siteloader").html('<object data=' + page + ' >');
</script>
</div>
</body>
Screengrab