SWFObject 2.0以降で SWFForceSizeを使用する方法

SWFForceSize *1を SWFObject 2.0以降で用いる方法を以前のエントリーに公開していたのですが、より安全な方法が検証できましたので、下記にサンプルと使用方法を再考しました。

下記、HTML側のサンプルコードでは、SWFObjectと SWFForceSizeの動作に必要な部分を緑字と赤字で記述しています。

【HTMLファイル側の記述】*2



<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <meta http-equiv="content-language" content="ja" />

  <meta http-equiv="content-script-type" content="text/javascript" />

  <meta http-equiv="content-style-type" content="text/css" />

  <meta name="keywords" content="Flash,SWFObject,SWFForceSize" />

  <meta name="description" content="SWFObject2.0以降で SWFForceSizeを使用するサンプルです" />

  <title>SWFObject2x and SWFForceSize</title>

  <link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />

  <script type="text/javascript" src="common/script/swfobject/swfobject2_2.js"></script>

  <script type="text/javascript" src="common/script/swfforcesize/swfforcesize.js"></script>

  <script type="text/javascript">

  // <![CDATA[

    var flashvars = {};

    var params = {

      bgcolor:"#ffffff",

      scale:"noscale"

    };

    var attributes = {

      id: "main",

      name: "main"

    };

    swfobject.embedSWF("sample.swf", "main", "100%", "100%", "9.0.0","common/script/expressinstall/expressInstall.swf", flashvars, params, attributes);

    swfobject.addLoadEvent(function() {

      var so = document.getElementById("main");

      if(so) {

        var forcesize = new SWFForceSize(so, 800, 600);

        forcesize.onLoadDiv();

      }

    })

  // ]]>

  </script>

</head>

<body>

  <div id="main">

    <div id="plane">

      <h1>SWFObject2x and SWFForceSize</h1>

      <p>SWFObject2.0以降で SWFForceSizeを使用するサンプルです</p>

      <blockquote>

        <p>ご使用のブラウザ環境では、このページが正しく表示できない可能性があります。<br />

          以下の注意点を確認し、必要な設定を行った上で再度表示してください。</p>

        <ul>

          <li>ブラウザの JavaScript 設定を有効化してください。</li>

          <li>最新の <a href="http://www.adobe.com/go/JP-H-GET-FLASH">Adobe<sup>®</sup> Flash<sup>®</sup> Player</a> をインストールしてください。</li>

        </ul>

        <p><a href="http://www.adobe.com/go/JP-H-GET-FLASH"><img src="common/images/get_adobe_flash_player.png" alt="Adobe Flash Player のダウンロード" width="158" height="39" /></a></p>

      </blockquote>

    </div>

  </div>

</body>

</html>

【CSSファイル側の記述】



@charset "utf-8";
html {

  margin      : 0;

  padding     : 0;

  height      : 100%;

  overflow    : auto;

}

body {

  margin      : 0;

  padding     : 0;

  width       : 100%;

  height      : 100%;

}

#main {

  position    : absolute;

  top         : 0;

  left        : 0;

  width       : 100%;

  height      : 100%;

  line-height : 0;

  text-align  : center;

}

【動作確認環境】



Windows 7

	IE/8.0.7600

	Firefox/3.6

	Safari/4.0.4

	Google Chrome/4.0.249.89

Windows XP SP2

	IE/8

	Firefox/3.5.3

	Safari 4.0.3

Mac OS X 10.5.8

	Firefox 3.5.2

	Safari 4.0.3

*1:Pixelbreakerより配布されている JavaScriptで、ウィンドウ(Flash表示領域)が指定したサイズより小さくなった際にスクロールバーを表示できます

*2:サンプルでは Flash／代替コンテンツを表示するコンテナの idを "main"、最小ウィンドウサイズを横:800 px × 縦:600 pxとしています