読者です 読者をやめる 読者になる 読者になる

エロサイトの作り方

2013年11月から勉強しながらエロサイトを作っています。

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

FC2ブログ JavaScript

2014/11/19 追記

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

(PostMessageというもの自体、初めて知った)

 

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

レスポンシブデザインで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を使ってアップロードすると同一ドメインにアップできる気がする(未確認)なので、 こっちはそのうち試す予定。