javascript - iFrame 布局和滚动问题

Question

我正在开发一个供我们公司内部使用的网站。 因此，搜索引擎优化/优化等都不是问题，因为它是在本地计算机而不是网络上运行的。

我想做的是在左侧(250 像素宽)有一个菜单，单击该菜单会在其旁边打开第二个菜单。单击此菜单中的元素时，它会在第二个菜单一侧的框架中打开。如果您查看所附图片，将会更好地理解布局。

http://rhinoaustralia.com/application/layoutProblems.jpg

我把基本网站放在这里: http://rhinoaustralia.com/application/

(请注意，缺少内容，只有少数内容有效，但我正在尝试先让布局正常工作)。 css文件可以通过firebug等找到。

只有一个页面包含第一个菜单，旁边有一个 iframe。当有人点击一个菜单项时，它会在它旁边打开一个新页面。这个新页面还有一个旁边带有 iframe 的菜单，因此当单击此菜单中的某些内容时，它会显示在新的 iframe 中。

这种方法可行，但我在将 iframe 设置为全屏并调整为不同的屏幕尺寸时遇到了问题。出于某种原因，在 IE 中它也不会隐藏边框。

除了嵌套的 iframe 之外，也许还有更好的方法来做到这一点？

这是主页/第一页:

<div id="container" style="width:100%">

<div id="header" style="background-color:#222;">
    <h1>Rhino Australia Rugby Union</h1></div>

    <div id="menu" style="background-color:#222;width:250px;float:left;">
      <ul class="ca-menu">
                <li>
                    <a href="rugby-union-scrum-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Scrum & <br/>Breakdown</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="rugby-union-tackle-bag-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/low-bag-grip-and-rip.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Tackle Pads <br/> & Bags</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-balls-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/vortex-pro.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Balls</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-training-equipment-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/rhino-body-armour.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Training <br/> Equipment</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-accessory-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/water-bottle-carrier-metal.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Accessories</h2>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:80%; height:700px ">
    <iframe src="rugby-union-scrum.html" name="iframe_rugby-union-menu" width="100%" height="90%" frameborder="0"></iframe>
    </div>
</div>

这是在 iFrame 中打开的新页面:

<div id="container" style="width:100%">

    <div id="menu" style="background-color:#222;height:400px;width:300px;float:left;">
      <ul class="ca-menu">
                <li>
                    <a href="bulldog-sled.html" target="iframe_rugby-union">
                        <span class="ca-icon"><img src="images/rugby-union/scrum-sled.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Scrum Sled <br/> Machine</h2>
                            <h3 class="ca-sub">$7080</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="collision-king.html" target="iframe_rugby-union">
                        <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Collision King</h2>
                            <h3 class="ca-sub">$3590</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="ca-icon"><img src="images/rugby-union/one-man-portable-scrum.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Portable Scrum <br/> Machine</h2>
                            <h3 class="ca-sub">$2770</h3>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:800px; height:700px">
    <iframe src="rugby-union.html" name="iframe_rugby-union" width="100%" height="90%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false">></iframe>
    </div>
</div>

感谢任何帮助!

Answer 1

我认为使用 iFrame 来实现此功能并不是最好的主意，因为本质上发生的事情是它仍然填充 iFrame div 的 100% 宽度，正如 CSS 告诉它的那样，但在较小的屏幕尺寸下，第二个 iFrame 没有空间容纳并消失。

也许您可以通过将 Assets 放在本地的 div 中来做到这一点？或者，对于更时尚的解决方案，请尝试使用 jQuery Mega Menu 库:http://designingmedia.com/html/fbar/?theme=FHMM

祝你好运!