web-dev-qa-db-ja.com

iframeのより良い代替手段？

クリックしたタブのコンテンツを表示するiframeのページがあります。 3つのタブと1つのiframeがあります。クリックされた各タブに関連するコンテンツのソースは、他のhtml cssファイルでフォーマットおよびコーディングされます。

タブがクリックされたときに、新しいページが読み込まれているときと同様に、白い背景がまだ表示されていることに気付いたので、iframeを使用する別の方法は何ですか？

私のコードは次のとおりです。

<div id="tabs">
<div id="overview">
  <a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
  <a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
  <a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>

<div id="tabs-1">
  <iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
  </iframe>
</div>
javascripthtmlcssiframetabs
26
laura

IFRAMEを使用して（ページがロードされた後）動的コンテンツをロードする唯一の代替方法は、AJAXを使用してWebページのコンテナを更新することです。 IFRAMEに。

15
Pekka 웃

別の代替方法は、AJAXを使用してタブのコンテンツをロードし、divを使用してコンテンツを表示することです。既存のタブライブラリを使用することは、タブの作成に関連する問題。

jQuery UI Tab は、試してみたい場合に役立つかもしれません。

編集：AJAX UIタブを使用した例。

まず、HTMLは次のようになります。

   <div id="tabs">
     <ul>
      <li><a href="toframe.html"><span>Overviews</span></a></li>
      <li><a href="tawagpinoygallery.html"><span>Gallery</span></a></li>
      <li><a href="trframe.html"><span>Reviews</span></a></li>
     </ul>
   </div>

次に、適切なjQueryファイルをインポートしてください。

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  etc...

次に、コードを追加してタブを作成します。

   <script type="text/javascript">
$(function() {
    $("#tabs").tabs();
});
</script>
13
Vincent Ramdhanie

AJAXに代わるものがあります！

3つの可能なコンテンツすべてを個別のDIVにロードできます。

次に、タブをクリックすると、適切なコンテンツのDIVの表示属性が「ブロック」になり、他の2つのDIVの表示プロパティが「なし」になります。

安価で簡単、AJAX追加のHTTPリクエストまたはコーディングのコストは不要です。

タブの内容がページの読み込み時に認識されるのではなく、他のデータに基づいて動的に変化する場合は、AJAXがより良いソリューションです。

5
DVK

スクリプトは必要ありません。

_<ul><li><a href="#foo">foo link</a><li><a href="#bar">bar link</a></ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>
_

さらに、ほとんどのブラウザのこのCSS：.tab:not(:target) { display: none !important; }は、：targetがサポートされていない場合に表示されるすべてのコンテンツにデフォルト設定されます（最新のブラウザではサポートされています）。

スクリプトでコンテンツを表示している場合は、常にスクリプトで非表示にします。そのスクリプトが実行されない場合は、優雅に劣化させます。

2
Anonymous

HTML iframeは、PDFファイルなどのコンテンツを含める/表示するために使用されます非テンプレート。 SEOとUXの両方の意見で、テンプレートコンテンツ（HTMLなど）に使用する場合、これは悪い習慣と見なされます。

あなたの場合、タブ付きのパネルだけが必要です。これはいくつかの方法で解決できます。

  1. タブとしてリンクの束を持ち、タブのコンテンツとしてdivの束を持ちます。最初は最初のタブコンテンツのみを表示し、CSS _display: none;_を使用して他のすべてのタブを非表示にします。 JavaScriptを使用して、タブのコンテンツdivにCSS _display: block;_（表示）と_display: none;_（非表示）を適宜設定して、タブを切り替えます。

  2. 多数のリンクをタブとして、1つのdivをタブのコンテンツとして使用します。 Ajaxを使用してタブコンテンツを非同期に取得し、JavaScriptを使用して現在のタブコンテンツを新しいコンテンツに置き換えます。

  3. 多数のリンクをタブとして、1つのdivをタブのコンテンツとして使用します。各リンクに、クリックされたタブを表す異なるGET要求パラメーターまたはパス情報を送信させます。サーバー側のフロー制御（PHPのif()、またはJSPの_<c:if>_など）を使用するか、機能を含める（PHPのinclude()、またはJSPの_<jsp:include>_など）パラメータ/パス情報に応じて、目的のタブコンテンツを含める。

JavaScriptベースのアプローチを採用する場合、このために jQuery を採用することをお勧めします。

1
BalusC

これは、ドキュメントに別のhtmlページを含める jQuery の例です。これはiframeよりもはるかにSEOフレンドリーです。ボットが含まれているページのインデックスを作成していないことを確認するには、robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript">
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

Googleから直接jQueryを含めることもできます： http://code.google.com/apis/ajaxlibs/documentation/ -これはオプションの自動挿入を意味します新しいバージョンといくつかの大幅な速度向上の。また、jQueryのみを配信するためにそれらを信頼する必要があることを意味します;）

1
sorin

前述のように、jQueryまたは別のライブラリを使用してHTMLファイルのコンテンツを取得し、それをdivに取り込むことができます。その後、ファンシーフェードを実行して、すべてをきれいに見せることもできます。

http://docs.jquery.com/Ajax/jQuery.get

これらの線に沿って何か：

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});

編集..事前に入力するか、動的に取得することができるonclick

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})

あなたが現在持っているものの代わりに3つのコンテナを持つことができる場合、2つの非表示、1つの表示、そしてクリック機能はあなたが望むものを除いてそれらをすべて非表示にします。

ただし、コードを少なくすることで時間を節約できます。

1
neatlysliced

おそらく、各タブのコンテンツを同じページのDIVにロードし、JavaScriptとCSS表示プロパティを使用してタブボタンがクリックされたときに各DIVの表示を切り替えることをお勧めします。

それができない場合は、おそらくiframeが最適なソリューションです。 iframeの背景を透明にすることができます。以下を参照してください。

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

次に、次を使用してBODY要素に次のCSSを追加する必要があります。

BODY { Background: transparent; }
1
Camsoft