4

我有四个链接在同一页面的 iframe 上打开。我的问题是 iframe 在页面加载时占用了空间，我希望它保持隐藏状态，直到在小屏幕尺寸中单击任何链接，因为在页面加载时同一页面正在加载该 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>
4

2 回答 2

3

现在你可以这样做: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>

现场演示

于 2012-11-22T06:30:57.767 回答
3

您可以将 onclick 事件添加到您的 ul：

<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>
于 2012-11-22T06:52:24.297 回答