【SharePointアプリ】iFrame追加

IT Windows

SharePointアプリはサーバーサイドロジックを使用しないSharePointホスト型アプリであっても裏側でサーバーサイド用のポストバック用Scriptやformなどを吐き出しています。
これが悪さをするらしく、画面の縦位置が正しく取れなかったりするようです。
これにより外部のライブラリ(jquery.validationEngine等)が正しく動作しなくなります。

jquery.validationEngineの場合
・デフォルトのformと追加したformがネスト状態になり動作しない。デフォルトformを指定することで逃げられるが、formを二つ配置できない。
・オブジェクトの正しい相対位置が取れないため、バルーンの描画位置がずれる。

これらのフレームワークに付随した不具合を極力回避するために、iFrameを使用してコンテンツ自体はhtml化することにしました。
考慮点はそこそこあるのですが、大きくはまず以下の2点。

iFrameの高さを再計算する。

下記サイトを参考にさせていただきましたが、そのままではSharePointアプリ上では動作しないため、若干変更しています。

iframe の高さを内容に応じて自動で調節する JS 他 | ヨモツネット

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  <script>
    // iFrame高さ計算
    var iframeHeight = function () {
      var iframe = document.getElementById('frmMain');

      if (iframe.contentDocument == undefined) {
        return false;
      }

      var childDiv = document.getElementById('frmMain').contentDocument.getElementsByTagName('div')[0];
      if (childDiv != null) {
        iframe.style.height = (childDiv.scrollHeight + 50) + 'px';
      }

      setTimeout('iframeHeight()', 750);
    }

    try {
      window.addEventListener('load', iframeHeight, false);
    } catch (e) {
      window.attachEvent('onload', iframeHeight);
    }
  </script>

  <div>
    <iframe id="frmMain" name="frmMain" src="./ChildPage.html" style="width:800px;" seamless/>
  </div>
</asp:Content>

親画面からCSSをコピーする。

親画面にはテンプレートで追加されたスタイルシートがあり、コンテンツ自体もこの変更に追従する必要があるため、親画面からコピーすることにしました。

function copyParentCss() {
  var link = window.parent.document.head.getElementsByTagName('link');
  for (var i = 0; i < link.length; i++) {
    $("head").append(link[i].outerHTML);
  };
}

とりあえずASP.NET系のWebフォームはJavaScript系ライブラリと相性が悪すぎ。
せめて必要のないコードをつらつら吐くのは止めて欲しい。。

本家はASP.NET MVCに移行する気満々で、今後ライブラリとの親和性が改善されるはずもないので、SharePointアプリもそっちに寄せて欲しいです(続ける気があるのなら。。)