FC2ブログではファイルアップ先のドメインが違うのでiframe内の要素をJavaScriptで操作できない

2014/11/19 追記

「できない」と書いてますけど、PostMessageを使うとできるらしいです。

（PostMessageというもの自体、初めて知った）

• jQueryを用いて、PostMessageで通信した時のイベントリスナを追加する - Qiita

• postMessageを簡単に - tohokuaikiのチラシの裏

時間ができたら試してみます。

レスポンシブデザインでiframeを使ってタイル状にコンテンツを並べていると表示幅によって高さが変わってくるので、 $(window).resize()を拾ってiframeタグの高さを変えるということをやりたい。

しかし、FC2ブログはiframeファイルも画像用の別ドメインにアップされるので、クロスドメイン制約（Same-Origin Policy）に引っかかって操作できない。

子→親

$('iframe', parent.document)[0].style.height = $('body').height() + 'px';

Uncaught SecurityError: Blocked a frame with origin "http://blog-imgs-**.fc2.com" from accessing a frame with origin "http://**.blog.fc2.com". Protocols, domains, and ports must match. iframe.html:28

親→子

$('iframe').contents().find('body').height();

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://**.blog.fc2.com" from accessing a cross-origin frame

ライブドアブログの場合は同一ドメインにもアップできるのでこの問題は起こらない。

解決策は、CSSのMedia Queryを使って幅に合わせて高さを一つずつ書いていくしかなさそうなので、そうすると幅から高さが計算できる升目状のものしか置けない。（Masonryを使うような並べ方はできない）

あるいは、有料版の機能にあるFTPを使ってアップロードすると同一ドメインにアップできる気がする（未確認）なので、 こっちはそのうち試す予定。