Hypeの iframe でスクロールバウンス抑止

HypeとMelonJSで電子書籍のプロトタイプみたいなものを作っています。
Hypeのバージョンは1.6.2です。MelonJSは0.9.11です。

以下の画像のような感じで、iPhoneをランドスケープにし、本文とゲームで半分に分けて表示させる仕様です。下地となる本文エリアは、サイズを480x320にし、ゲームエリアは、その上から iframe を貼付けました。このiframeでは、MelonJSのサンプルを改造したHTMLファイルを指定しました。

下地が白なので境界が見えませんが…
これを、PhoneGap2.9.1を使用して実機で試したところ、タッチでスクロールバウンスをしてしまいます。スクロールを無効にする方法を検索したところ、XCodeのプロジェクトフォルダの下のResourceフォルダの中に config.xml という設定ファイルを変更すればよいとのことです。よって、以下の DisallowOverscroll 属性の値を true に変更します。

<preference name="DisallowOverscroll" value="true" />

これで、本文エリアはスクロールバウンスを抑止できたのですが、ゲームエリアの方がまだできていないようです。Hypeで その iframe をインスペクタで一通り見ても、そのようなスクロールに関する項目がありませんでした。

Hypeのフォーラムによると、iframe にID（仮に iframe5 とする）を付けて、Hypeのドキュメントのロード直後に以下のスクリプトを実行すればできるそうです。

var changeinnerhtml = '<iframe src ="http://site.com/" 'width="240px" height="320px" scrolling="no"></iframe>';
document.getElementById("iframe5").innerHTML = changeinnerhtml

scrolling="no"というところが、スクロール禁止の属性のようです。あらかじめHypeで設定されたiframeを後で置き換えるというものです。同じiframeを２回表示することになるので、Hypeのiframeの設定で、TypeをEmdeded HTML にして適当なテキストでも入れておいた方がよさそうです。

さて、このスクリプトをどこに置いたらよいのでしょうか？
取りあえず、Hypeがエクスポートで吐き出すスクリプトに追加してはみましたが、
これで、良いのかどうかはわかりません。吐き出すたびに追加する作業をしないといけないのが面倒です。

エクスポートすると、XXX_hype_generated.jsというファイル名で生成されます。そのファイルの最後に、以下のように追加しました。hypeDoc.documentLoad(this.body); の直後です。
www_melonjs/index.html がMelonJSのサンプルですが、iPhoneで表示するために若干修正しています。

   HYPE.documents[documentName] = hypeDoc.API;
   document.getElementById(mainContainerID).setAttribute("HYPE_documentName", documentName);

   hypeDoc.documentLoad(this.body);

   var changeinnerhtml = '<iframe src ="www_melonjs/index.html" width="240px" height="320px"

scrolling="no"></iframe>';
   document.getElementById("iframe5").innerHTML = changeinnerhtml

}());

以上、実機で試してみたところ、スクロールバウンスは抑止できました。


その２に続きます。