タグ

iframeに関するko-ya-maのブックマーク (6)

  • iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」:phpspot開発日誌

    FaiblUG/setIframeHeight GitHub iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 iframe外からはコンテンツの高さって取れなかったりしたと思うので、いざ同じことを実装しようとすると面倒ですが、こちらのスクリプトで簡単に調整でき、調整された際のイベントハンドラも設定できたりと便利に使えそうです。 関連エントリ image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」

  • 外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法

    <iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600"></iframe> <iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600" style="zoom:0.55"></iframe> 通常 zoom:0.55 悲しいことに、iframeの横幅・縦幅が0.55倍になるだけで、 iframe内のコンテンツが縮小されるわけではないのです。 Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。 また、iOSではそもそもiframeの幅指定を無視します。 ではどうすればよいのでしょうか? 答えとしては、CSS3が解釈できるブラウザ限定にはなりますが、 CSS3のtr

    外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
  • 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編

    HTML5から、ウィンドウ(フレーム)間でメッセージの送受信を行うための仕組みが用意された。この仕組みを用いると、対象となるウィンドウのインスタンスさえ手に入れば、同じオリジン(プロトコル+ドメイン + ポート番号)のWebページはもちろん、違うオリジンのWebページとも通信を行うことが可能だ。 まず、他のウィンドウから送られてきたメッセージを受信するには、windowオブジェクトのmessageイベントを監視する必要がある。 // messageイベントの監視 window.addEventListener("message", function() {...}, false); 他のウィンドウに対してメッセージを送信する場合は、window.postMessage()メソッドを使用する。 postMessage(data, "targetOrigin"); postMessage()の

    ko-ya-ma
    ko-ya-ma 2012/04/11
    「対象となるウィンドウのインスタンスさえ手に入れば、同じオリジン(プロトコル+ドメイン + ポート番号)のWebページはもちろん、違うオリジンのWebページとも通信を行うことが可能」
  • iOSのSafariでサードパーティーCookieが使えない対策 - Takuji->find;

    iOSのSafariでiframe内に別ドメインのページを表示して、そのドメインでCookieを使う場合、最初のページでは使用できないという素敵な仕様がある。 対策方法としては、POSTで遷移するとか、パラメーター持ち回って次のページでCookieにセットするとか。 <form id="redirect_form" action="" method="POST"> <input type="hidden" name="hoge_session" value="[% sid %]" /> <button type="submit">げーむをはじめる!的な</button> </form> <script type="text/javascript"> $(document).ready(function (){ $('#redirect_form').attr('action','/');

    iOSのSafariでサードパーティーCookieが使えない対策 - Takuji->find;
    ko-ya-ma
    ko-ya-ma 2012/04/04
    「iOSのSafariでiframe内に別ドメインのページを表示して、そのドメインでCookieを使う場合、最初のページでは使用できないという素敵な仕様がある」→POSTで遷移
  • scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…

    Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり/なしによる、ページの読み込み/表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が

    ko-ya-ma
    ko-ya-ma 2012/04/04
    defer / acync 属性付き script でノンブロッキングなページレンダリングを。
  • jQuery を使って iframe の中の要素にアクセスする方法 : 地潜の日記

    2010年02月07日 15:06 カテゴリプログラム・スクリプト jQuery を使って iframe の中の要素にアクセスする方法 No Comments No Trackbacks jQuery の AJAX の機能をバリバリ使ったものを、番サーバーにアップしたら動かない!という悲劇があった。先日。 色々試したけど、分かった原因は「サーバーの仕様っぽい」止まり。(誰か原因を教えてー) サーバーの仕様変更はできないし、これに時間をかけてもアレなので、AJAX を使わず、iframe で回避した。 その時やったことを忘れないよう、jQuery を使って iframe の中の要素にアクセスする方法を書いておく。 ■ 基礎 まず、iframe 内のページの document オブジェクトの参照はこれでOK $('iframe:first').contents() (例として、ページ内にある

    jQuery を使って iframe の中の要素にアクセスする方法 : 地潜の日記
    ko-ya-ma
    ko-ya-ma 2012/02/08
    同ドメイン上のiFrameに限る
  • 1