web-dev-qa-db-ja.com

iframeを使用したhtml5のフレームの代替

私はHTML5を初めて使い、いくつかの調査を行った結果、<frameset>の使用は時代遅れであり、私が読んだ<iframes>の使用は時代遅れではないことがわかりました。だから誰かが私を助けることができます、私は示された例と同じ結果を取得したいのですが、<iframes>またはHTLM5で非推奨ではない<frameset>の別の代替物を使用していますか？

<frameset cols="20%,*,">
    <frame src="menu.html">
    <frame src="events.html">
</frameset>
jqueryhtml5iframeframeset
26
user2682329

Urlはインデックスページ（フレームセットを含む）を表示するだけで、各フレームウィンドウの内容を指定する方法がなかったため、フレームはURLナビゲーションとハイパーリンクに問題を引き起こすため廃止されました。今日、ウェブページは、PHP、ASP.NET、Rubyなど）などのサーバーサイドテクノロジーによって生成されることがよくあります。したがって、フレームを使用する代わりに、このようなコンテンツとテンプレートをマージすることでページを簡単に生成できます：

テンプレートファイル

<html>
<head>
<title>{insert script variable for title}</title>
</head>

<body>
  <div class="menu">
   {menu items inserted here by server-side scripting}
  </div>
  <div class="main-content">
   {main content inserted here by server-side scripting}
  </div>
</body>
</html>

サーバー側スクリプト言語を完全にサポートしていない場合は、サーバー側インクルード（ [〜＃〜] ssi [〜＃〜] ）も使用できます。これにより、同じことを行うことができます-つまり複数のソースドキュメントから単一のWebページを生成します。

ただし、Webページのセクションを、自分のサーバーに必ずしもあるとは限らない他のWebページをロードできる個別の「ウィンドウ」にしたい場合は、 iframe を使用する必要があります。 。

次のように例をエミュレートできます。

フレームの例

<html>
<head>
  <title>Frames Test</title>
  <style>
   .menu {
      float:left;
      width:20%;
      height:80%;
    }
    .mainContent {
      float:left;
      width:75%;
      height:80%;
    }
  </style>
</head>
<body>
  <iframe class="menu" src="menu.html"></iframe>
  <iframe class="mainContent" src="events.html"></iframe>
</body>
</html>

おそらく、レイアウトを実現するためのより良い方法があります。 CSS float 属性を使用しましたが、テーブルや他のメソッドも使用できます。

29
drwatsoncode

私は他のすべての人に同意しますが、とにかくフレームを使用することに固執している場合は、XHTMLでindex.htmlを実行し、HTML5でフレームのコンテンツを実行できます。

6
user2302019

HTML 5はiframeをサポートします。 「sandbox」や「srcdoc」など、いくつかの興味深い属性が追加されました。

http://www.w3schools.com/html5/tag_iframe.asp

または使用できます

<object data="framed.html" type="text/html"><p>This is the fallback code!</p></object>
4
user9371102