Question

我已尝试拼凑搜索中的示例，但无法完成我想要做的工作。在尝试了3天之后，我想我会伸手去寻求帮助。

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

基本上我想点击多个链接中的任何一个＆gt;打开隐藏的div＆gt;加载所选链接＆gt;关闭并隐藏div＆gt;点击其他链接＆gt;再打开隐藏的div＆gt;加载新链接。

这是我到目前为止所做的：

 $(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;
}

提供的演示只是将jsfiddle加载到div中。我想要做的是从同一个域加载一个html文件。不确定这是否是重要信息。 Here is a demo of what I have so far

Answer 1

<强> Demo

object采用默认尺寸。

将此添加到您的css。

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

外部html文件没有填充div

1 个答案: