[B! iframe] pochisatoのブックマーク

iframeの高さをJavaScriptで自動的に調整する方法

実装方法の説明ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。シンプルですね。実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。ソースコードの説明とデモまずは簡単なデモをご覧ください。デモでは以下を実装しています。子フレームでコンテンツの高さを取得子フレームからpostMessage()でコンテンツの高さを親フレームに送信親フレームでaddEventListner()を使ってメッセージを受け取る i

pochisato 2019/02/10

iframe

リンク

Friendly iFrame とサードパーティスクリプトのロード

Friendly iFrame という、サードパーティスクリプトの呼び出し方法について調べた。手法自体はかなり古いもので、後述する iAB のドキュメントは 2008 年に出ているものだ。Google の DFP などでは現在でも使われている。 Friendly iFrame (FiF) とはサードパーティのスクリプト (広告タグや SNS のシェアボタン、ブログパーツなど) をページに埋め込む手法のひとつ。より狭義には、iAB が出す Best Practices for Rich Media Ads in Asynchronous Ad Environments (pdf) で説明されている、(主に) リッチアドのアドタグを設計・設置する際のベストプラクティス。利点と他手法との比較 Friendly iFrame を他のサードパーティスクリプトの埋め込み手法と比較すると、ページのレ

pochisato 2016/06/29

リンク

[広告] SafeFrameを試してみる - Qiita

アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更(特に拡大)する場合に問題となる。このような問題を、セキュアに解決するために、IABが提唱したのがSafeFrameという規格だ。GoogleのDFPにも採用されている。 IAB SafeFrame SafeFrame Project 基本準備下記のページに必要なソース群があるので、まずはそれをダウンロードする。 SafeFrame Download Files src以下のファイルを下記のようにsafeframe/1.1.0というフォルダに格納する。 r.htmlはrender用のHTML

pochisato 2016/06/22

リンク

[JS] Youtubeをサイト内で再生させるYoutube APIの使い方。スマホにも対応させる。 - YoheiM .NET

こんにちは、@yoheiMuneです。今日は、JavaScriptを用いて、サイト内でYoutubeの動画を再生する方法をブログに書きたいと思います。 Youtube APIを使う Youtubeには、外部プログラムからデータを再生したり検索したりする為のAPIがいくつか用意されています。 Player API: AS3 Flash(ActionScript3)でYoutubeを再生する為のAPI Player API: JavaScript JavaScriptでYoutubeを再生する為のAPI。ブラウザはFlash環境が必須。 Player API: iframe iframe + JavaScriptを用いたAPI。ブラウザはFlashかHTML5 Videoのどちらかが必要。 Data API Youtube内の動画検索や関連動画取得などの情報取得用API 今回はiPhoneで

pochisato 2014/08/30

リンク

YouTube APIとiOSのSafariで困る話: point of view point

YouTube動画再生をコントロールしたい。というわけで、YouTube APIを勉強開始。PCではOKなのに、iOSだとうまくいかないということが発生。いろいろむずかしい。なんでも、2つの方法があるとか。YouTube JavaScript Player APIとYouTube iFrame API。前者はFlashを使ったもので、SWFObjectを使う。Flashなので、iOSでは使用できないの。ということで、後者を使うんだそうだ。 YouTube JavaScript Player API｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room YouTube iFrame Player API｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room 自動再生開始は不可で、後者を使ってテスト