Question

我有四个链接在同一页面上的iframe上打开。我的问题是iframe占用页面加载的空间，我希望它将保持隐藏，直到任何链接被点击coz在小屏幕尺寸同一页面是在页面加载上加载iframe，因为它在大屏幕尺寸下运行良好。请帮我解决这个问题。

以下是我打开iframe的代码：

<ul class="thumbnails">
    <li class="span2">
<h6>DELHI :</h6>
A-21/13,Naraina Industrial Area,
Phase II,
New Delhi - 110028.
Tel. No. : 011 - 49807100 / 101
<a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+of+fashion,+CH+Girdhari+Lal+Marg,+Naraina+Industrial+Area,+Naraina,+Delhi&amp;aq=0&amp;oq=Pearl+Academy+Of+Fashion+de&amp;sll=20.984928,82.752628&amp;sspn=61.071168,79.013672&amp;ie=UTF8&amp;hq=Pearl+Academy+of+fashion,+CH+Girdhari+Lal+Marg,+Naraina+Industrial+Area,+Naraina,+Delhi&amp;t=m&amp;ll=28.648453,77.146039&amp;spn=0.011298,0.037293&amp;z=15&amp;output=embed" target="frame">Click Here To View Map</a></li>
    <li class="span2">
<h6>NOIDA :</h6>
B-25,Sector - 59,
Noida- 201301, UP.
Tel. No. : 0120 - 4904000
<a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=B-25,Sector+-+59,+Noida-+201301+UP.&amp;sll=37.0625,-95.677068&amp;sspn=50.244827,79.013672&amp;ie=UTF8&amp;hq=&amp;hnear=Sector+59,+NOIDA,+Gautam+Buddha+Nagar,+Uttar+Pradesh,+India&amp;t=m&amp;ll=28.610219,77.367697&amp;spn=0.022605,0.074587&amp;z=14&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a></li>
    <li class="span2">
<h6>CHENNAI :</h6>
82,Sterling Road,
Nungambakkam,(Opposite Loyola College),
Chennai - 600034
Tel. No. : 044-42664445 /46/49/50, 43447900
<a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+Of+Fashion,+Sterling+Rd,+Nungambakkam,+Chennai,+Tamil+Nadu&amp;aq=0&amp;oq=Pearl+Academy+Of+Fashion,+Chennai&amp;sll=13.065034,80.239013&amp;sspn=0.008121,0.009645&amp;ie=UTF8&amp;hq=Pearl+Academy+Of+Fashion,&amp;hnear=Sterling+Rd,+Nungambakkam,+Chennai,+Tamil+Nadu&amp;t=m&amp;ll=13.065516,80.239592&amp;spn=0.006271,0.018647&amp;z=16&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a></li>
    <li class="span2">
<h6>JAIPUR :</h6>
SP-38A,RIICO Industrial Area,
Delhi Road,Kukas,
Jaipur-302028.
Tel. No. : 01426 - 414800, 227515, 227616, 227617
<a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+Of+Fashion,+Jaipur+city+office,+Rajasthan&amp;aq=&amp;sll=25.845253,74.840307&amp;sspn=7.677536,9.876709&amp;ie=UTF8&amp;hq=Pearl+Academy+Of+Fashion,+Jaipur+city+office,&amp;hnear=Rajasthan&amp;t=m&amp;cid=16689440355655361409&amp;ll=27.527758,76.783447&amp;spn=2.922529,9.547119&amp;z=7&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a></li>
</ul>
<span style="color: #e15b1f;">For more information contact:<a href="#"> counsellor@pearlacademy.com</a>, Toll Free No. 1800 103 3005</span>

这里是同一页面上的iframe：

<div style="display:none;"><iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>

Answer 1

现在您可以执行此操作:focus

就像这样

<强>的CSS

.frame_div{
border:solid 1px red;
    width:300px;
    display:none;
}


.frame_div iframe{
    height:200px;
    width:300px;
    background:green;
}

.click_iframe{
display:inline-block;
    vertical-align:top;
}
.click_iframe:focus + div{
display:block;
}

<强> HTML

<ul class="thumbnails">
 <li class="span2">
<a href="#" target="frame" class="click_iframe">Click Here To View Map</a>
<div class="frame_div"><iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>
</li>
</ul>

的 Live Demo 的

Answer 2

您可以在ul：

中添加onclick事件

<ul class="thumbnails" onClick="document.getElementById('frame').parentNode.style.display=''">

假设您的iframe ID为“frame”：

<div style="display:none;"><iframe name="frame" id="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>

想要隐藏iframe，直到点击链接

2 个答案: