prog*sig

■8.0 Introduction

window, navigator, screen, history, and locationなどのBrowser Object Model (BOM)についての話。

■8.2  Creating a New, Stripped-Down Browser Window

window.open("http://oreilly.com", "namedWindow");について。
引数なしだとabout;blankと_blankが入る。
HTML5では第４引数にreplaceが加わっている。
window . open

■8.3  Finding Out About the Browser Accessing the Page

Navigator objectはmimeTypesやpluginsなどもとれたりするよ。

■8.5  Changing Stylesheets Depending on Color Support

カラー深度とかとれるのかー

if (window.screen.colorDepth <= 8) {
   var style = document.documentElement.style ?
document.documentElement.style : document.body.style;
   style.backgroundColor="#ffffff";
}

■8.6  Modifying Image Dimensions Depending on Page Size

また本題と関係ないけど、window.screen.availWidthでスクリーンサイズが取得できる。

■8.7  Creating Breadcrumbs in a CMS Template Page

window.locationのプロパティ

window.locationのプロパティ
Property	Description	Example
hash	Part of URL following #, including the #	#mysection
host	Hostname and optional port	burningbird.net or [burningbird.net]:80
hostname	Hostname	burningbird.net
href	Full URL	http://burningbird.net/jscb#test
pathname	Relative path name	/jscb#test
port	Port number	80
protocol	URL protocol	http:
search	Part of the URL following ?, including ?	?q=username

URLを分割していけば、パンくずリストみたいなものが作れる。

  // split relative path
  var items = location.pathname.substr(1).split("/");
  // build main path
  var mainpath = "<a href='" + location.protocol + "//" +
   location.hostname + "/";
  // begin breadcrumb
  var breadcrumbTrail = "<p>";
  for (var i = 0; i < items.length; i++) {
    // trailing slash
    if (items[i].length == 0 ) break;
    // extend main path for new level
    mainpath+=items[i];
    // add slash after all but last item
    if (i < items.length-1)
      mainpath+="/";
    // create breadcrumb component
    // add arrows for interior items only
    if (i > 0 && i < items.length)
      breadcrumbTrail+=" -> ";
    // add crumb
    breadcrumbTrail+= mainpath + "'>" + items[i] + "</a>";
  }
  // insert into page
  breadcrumbTrail+="</p>";
console.log(breadcrumbTrail);

■8.9  Preserving State for Back Button, Page Refresh

fragment (#somevalue)についての話。
Ajaxでページを変更する際にタイマーを回して#フラグメント、ハッシュを変更する事で状態の変更が記憶され戻るボタンで一つ前に戻ることができる。
このAjaxのための戻るボタン代替のために#フラグメントを使うのはあまり好ましいものではないと考える。フラグメントは間違ってリロードした際やブックマークのリンクのためにあると考えるから。

そのうち HTML5 history objectを使ったものが主流になるはず。