anti scroll

ブラウザと小説の新しい関係を模索する

クロスドメインで子フレームから親ドキュメントのwidth:100%を取得する方法

ひょんなことからviewportdevice-widthbodyタグから適用される事を知りました。

別の言い方をすれば「bodyより上位のタグには適用されない」ということみたいです。

例えば次のようなページ(parent.html)をiPhone5device-width = 320px)で開き、iframeを使ってchild.htmlを読み込ませます。

<!-- parent.html -->
<html>
  <head>
    <meta viewport content="max-width=device-width">
  </head>
  <body style="margin:10px">
    <iframe width="100%" src="https://other-domain.com/child.html"></iframe>
  </body>
</html>

<!-- child.html -->
<html>
  <head>
    <meta viewport content="max-width=device-width">
  </head>
  <body>
    this is child!
  </body>
</html>

このときchild.htmlで、bodyhtmlの横幅をそれぞれ確認すると…

$("html").width(); // 300px
$("body").width(); // 320px(device-width)

htmlの横幅 < bodyの横幅

という結果になりました。

つまりchild.htmlのbodyにはdevice-widthが設定されていますが、htmlには親(parent.html)のコンテキストを考慮したサイズ(width:100%)が生きているのです。

クロスドメインだと子フレームから親ドキュメントの情報を取得する処理は(セキュリティー上の理由で)ブロックされますが、この情報を使えば少なくとも親ドキュメントの横幅は取得できる、ということになります。

もちろんchild.htmlmetamax-width=device-widthが設定されている必要がありますが。