Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/224-cb316cb5

-件のトラックバック

-件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

HTML5における「target属性で指定したエリアの画面遷移」について

下図のように、シンプルな2カラムの画面で、左カラム上にボタンなんかがあって、
そこを選択した時に、target属性で指定したエリア(黄色のエリア)のコンテンツが
更新されるようなプログラムを書くのって今までは簡単でしたけど、HTML5だけで
やってみようとしたらちょっと調べなくてはいけない事態になってしまったので
記録しておきます。ネットで調べたり、書籍も当たってみたのですが、Canvasとか
Web StorageとかJavaScriptがらみの記事ばっかりで、こんな単純な画面遷移の
記事ってなかなか見つからないんですよね。まだ問題があるから誰も書かないのかな?
でもHTML5から勉強を始める人だっている筈だからそろそろ書かないとね。
HTML5におけるiframe内コンテンツの更新について

実現方法としては、黄色のエリアを枠無しのインラインフレームにしただけなのですが、
タグ"iframe"の属性が大きく変わってしまっていたので驚きました。
属性が6つも廃止されていました。
枠無しの設定は、seamless という新規で追加された属性を使います。ただこれ、値が
省略できるんですよねーー。属性の書き方でこんなのって今まであったかな???

インラインフレームの方は、

<iframe seamless id="subjects"></iframe>

こんな感じで書いておいて、ここにコンテンツを突っ込むリンク(図でいうところ
の左カラムに並んでいるヤツ)の方は、例えば

<ol>
<li><a href="./test.html" target="subjects">サンプル</a></li>
</ol>

こんな感じで書いておけばOKです。

以下サイトが参考になりました。
http://www.tagindex.com/html5/embed/iframe.html


ただ・・・

実際に書いて動かしてみたらChromeでしか動きませんでした。
(2013-03-07現在)
Windows7上のIE, Firefox, Safariの最新版もNGです。seamless属性が
反映されず(つまり枠が表示されたまま)、さらには画面全体が遷移してしまいます。

こんな状況では使いものにならないので、入口でブラウザの種類を
調べて、Chrome以外からのアクセスだったらエラー表示のコンテンツに飛ばす、
といった判定処理を用意する必要があります。これはHTML5中のJavaScriptでは
実現できないと判断しましたので、すぐさまPHPで書いてみます。
こんな感じで。

entrance.php

<?php
  $agent = getenv("HTTP_USER_AGENT");
  if( strstr($agent, "Chrome") ){
   readfile("index.html");
  }
  else{
   readfile("illegalbrowser.html");
  }
?>

動作確認ができましたので、これで大丈夫な筈です。
うーーーむ、HTML5についてはもっと調べなくては・・・。
いままでちょっとナメていました。

スポンサーサイト
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/224-cb316cb5

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Appendix

プロフィール

 二代目松四郎

Author: 二代目松四郎


「カメラと動画(+スチル写真)」
「音響と音楽」
「プログラミング」
を主なテーマに活動しています。
映画館と美術館と音楽ホールと
古い街並みが私の学校。

宮城県仙台市在住。

カテゴリー

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Counter

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。