Question

我是html，css，javascript的新手。我正在尝试将页面加载为页面中的子菜单项。我有这段代码：

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=1024">
    <head>
        <link rel="stylesheet" type="text/css" href="homePage.css">
        <title> Sample Website </title>
        <script>
            function showPicture(value)
            {
                if(value == "true")
                {
                    document.getElementById("content").innerHTML = '';
                    document.getElementById("content").innerHTML 
                            += '<iframe id="Picturebox" width = "76%" height = "545" src="menu1.html"></iframe>';
                }
                else
                {
                document.getElementById("content").innerHTML = '';
                }
            }
        </script>
    </head>
    <body>

        <div id = "Header">
            <h1> SAMPLE WEBSITE </h1>

        </div>      
        <div id = "Banner">
            <img id ="imgBanner" src = "./images/images.jpeg" />
        </div>      
        <div id="container">
        <div id = "menu">
            <table cellpadding="15">
                <tr> 
                    <td>
                        <a href="#" onclick="showPicture('true')">Menu 1</a> 

                    </td> 
                </tr>
                <tr> 
                    <td>
                        <a href="#" onclick="showPicture('false')">Menu 2</a>
                    </td> 
                </tr>
                <tr> 
                    <td>
                        <a href="#"  onclick="showPicture('false')">Menu 3</a>
                    </td> 
                </tr>
                <tr> 
                    <td>
                        <a href="#" onclick="showPicture('false')">Menu 4</a>
                    </td> 
                </tr>
            </table>
        </div> 
        <div id="content"></div>
        </div>


    </body>
</html>

menu1.html

<html>
    <meta name="viewport" content="width=80%,height=80%, scale=0.5">
<head>
    <link rel="stylesheet" type="text/css" href="subPage.css">
</head>
<body>

<h1>Menu 1 </h1>
<div id = "UnderLine"></div>
<p>     Hello!,
        this is a sample page having a heading,some content and 6 pictures .
</p>
<div id = "UnderLine"></div><br/>
<h4> Images </h4>
<div id = "UnderLine"></div><br/>
<div class="imgbox" style="position:relative;">
<img id = "pictures" src="./images/p (1).jpg" name=""/>
<img id = "pictures" src="./images/p (2).jpg" name=""/>
<img id = "pictures" src="./images/p (3).jpg" name=""/>
<img id = "pictures" src="./images/p (4).jpg" name=""/>
<img id = "pictures" src="./images/p (5).jpg" name=""/>
<img id = "pictures" src="./images/p (6).jpg" name=""/>
</div>

</body>

</html>

这里我尽力了。但IFrame使用水平滚动条加载页面。我需要帮助使其适合。有没有办法获得相同的。我用谷歌搜索，但有些或所有人都说宽度。不是高度。

Answer 1

尝试

<iframe id="Picturebox" width = "76%" height = "545" src="menu1.html" scrolling="no"></iframe>

Answer 2

<iframe scrolling="no" ....

阅读此文档：http://www.w3schools.com/tags/att_iframe_scrolling.asp

将页面装入IFRAME

menu1.html

2 个答案: