frameset過時,以及用div+iframe的代替frameset實現(xiàn)

今天在學(xué)習(xí) java web項目時,書中示例使用了 <frameset></frameset>標(biāo)簽,編譯器添加刪除線標(biāo)識該標(biāo)簽過時,最初考慮不影響使用,就沒有關(guān)心,運行工程后發(fā)現(xiàn)網(wǎng)頁沒有輸出,于是查詢相關(guān)資料,學(xué)習(xí)記錄。

過時的frameset

  • 使用frameset頁面空白問題

    這是因為我將 <frameset></frameset> 標(biāo)簽放到了 <body></body> 標(biāo)簽中實現(xiàn),而<frameset><body>不能一起使用。

  • 在 HTML 5 中不支持 <frameset></frameset> 標(biāo)簽。

  • 使用<frameset>可能會帶來session丟失等問題

<frameset id="frame" frameborder="0" framespacing="0"
              rows="100,*" border="false" scrolling="yes">

       <frame name="topframe" scrolling="auto" marginheight="0" marginwidth="0"
              src="header.jsp" noresize>
       <frameset  framespacing="0" border="false" cols="200,*" frameborder=
               "0" scrolling="yes">
           <frame name="leftFrame" scrolling="no" marginheight="0" marginwidth="0"
                  src="index.jsp" noresize>
           <frame name="rightFrame" scrolling="auto"  src="rightFrame.jsp"marginheight="0" marginwidth="0"
           >
       </frameset>
</frameset>

div+iframe替代frameset實現(xiàn)

<html>
<head>
    <title>網(wǎng)上書店</title>

    <style>
        body
        {
            margin: 0;
            padding: 0;
            border: 0;
            overflow: hidden;
            height: 100%;
            max-height: 100%;
        }

        #frameTop
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
            vertical-align: middle;
        }

        #frameContentLeft
        {
            position: fixed;
            top: 100px;
            left: 0;
            height: 100%;
            width: 150px;
            overflow: hidden;
            vertical-align: top;
            background-color: #D2E6FA;
        }

        #frameContentRight
        {
            position: absolute;
            left: 150px;
            top: 100px;
            height: 100%;
            width: 100%;
            right: 0;
            bottom: 0;
            overflow: hidden;
            background: #fff;
        }
    </style>
</head>
    <%--<frameset id="frame" frameborder="0" framespacing="0"--%>
              <%--rows="100,*" border="false" scrolling="yes">--%>

        <%--<frame name="topframe" scrolling="auto" marginheight="0" marginwidth="0"--%>
               <%--src="header.jsp" noresize>--%>
        <%--<frameset  framespacing="0" border="false" cols="200,*" frameborder=--%>
                <%--"0" scrolling="yes">--%>
            <%--<frame name="leftFrame" scrolling="no" marginheight="0" marginwidth="0"--%>
                   <%--src="index.jsp" noresize>--%>
            <%--<frame name="rightFrame" scrolling="auto"  src="rightFrame.jsp"marginheight="0" marginwidth="0"--%>
            <%-->--%>
        <%--</frameset>--%>
    <%--</frameset>--%>

<body>

    <div>
        <iframe id="frameTop" src="header.jsp"></iframe>
    </div>

    <div>
        <iframe id="frameContentLeft" src="index.jsp"></iframe>
        <iframe id="frameContentRight" src="rightFrame.jsp"></iframe>
    </div>

</body>
</html>
頁面效果圖

參考

祭奠那過時的框架標(biāo)簽frameset

用div+iframe 代替frameset 框架

Iframe 有什么好處,有什么壞處?國內(nèi)還有哪些知名網(wǎng)站仍用Iframe,為什么?有哪些原來用的現(xiàn)在拋棄了?又是為什么?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,526評論 1 41
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,871評論 32 459
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進(jìn)階之旅閱讀 115,532評論 24 450
  • 1. 瀏覽器頁面有哪三層構(gòu)成,分別是什么,作用是什么? 構(gòu)成:結(jié)構(gòu)層、表示層、行為層分別是:HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,987評論 1 11
  • 不知不覺,里約奧運會的賽程已經(jīng)過半,在賽場內(nèi)爭金奪銀、賽場外爭奇斗艷的奧運大舞臺上,總有一些“奧運之最”或讓我們感...
    金娛黃金閱讀 279評論 0 0

友情鏈接更多精彩內(nèi)容