Javascript 外部html文件未填充div

我曾尝试将搜索中的示例拼凑在一起，但无法完全得到我想要的工作。经过三天的努力，我想我应该寻求帮助

我的目标是打开一个隐藏的div，然后从其中的同一个站点加载另一个页面，填充整个div。理想情况下，我希望能够选择任意数量的这些外部html文件，并将它们加载到该隐藏的div中。现在它正在部分工作，但是外部html只填充了div的一部分。它对我的本地文件做了同样的事情

基本上我想点击任意一个链接>打开隐藏分区>加载选定链接>关闭并隐藏分区>点击不同链接>再次打开隐藏分区>加载新链接

以下是我到目前为止的情况：

 $(function () {
 $('a#linkid').click(function () {
     $('div#pagecontent').html('<object data="http://www.jsfiddle.net">');
     $('div#overlayframe').slideToggle("slow");
 });
 });

<div id="overlayframe">
<div id="pagecontent"></div>
<div id="exitoverlayframe"><a href="#" id="linkid">exit</a>
</div>
</div>
<a href="#" id="linkid">page link</a>

#overlayframe {  
position:fixed;
top:2.5%;
left:2.5%;
width:95%;
height:95%;
z-index:1000;
display:none;
background-color:red;
}
#exitoverlayframe {
position:absolute;
bottom: 0px;
right: 0px;
}

提供的演示只是将JSFIDLE加载到div中。我要做的是从同一个域加载一个html文件。不确定这是否是重要信息。

对象采用默认尺寸

将此添加到css中

object{
    height:100%;
    width:100%
}

---

我在这里工作。身份证应该是唯一的如果只是html@shaunakde是不是给你装满了整个红色的容器？对我来说，它只占了一小部分。而且，这个负载对我也不起作用。谢谢你想要这个吗