Home > Tags > iframe

iframe

【第5回】iframe同士の連携と新たな問題点、あとタイトル改名【javascriptだけで作るニコ風動画サイト】

前回はiframeを2つ用意してました。動画プレーヤー用と@anywhere用。
@anywhere用のiframeをjQuery UIで自由にドラッグできたらいいなーと思っていたんですが、iframe上だとイベントがうまくいかないようだったので?諦めました。

そして今回は動画プレーヤーifrmaeの中に@anywhereのiframeを入れています。
そして@anywhere用の中に動画プレーヤーの再生・停止ボタンなどのコントロールパネルを設置しました。
この二つのiframeは別ページなのですが、同一ドメインなのでiframe越しでもjavascriptでアクセスできるというわけです。

新たな問題点とは、youtubeのサイトから動画プレーヤーiframeに値(動画URL)を渡す時に、ハッシュクエリー(location.hash)を使っているんですが、これをするとURLが長すぎてうまく動作しないような気がします。現状IEで作動しないのはこれのせいだと思います。
あとhashの値がブラウザによって変わるみたいですね。URIencode関係で。
次回はこのあたりをちょっと変えようと思います。

で、どう変えるかと言うとwindow.postMessageを試してみようと思います。
postMessageは新しい仕様なので躊躇していたんですが、IE8からいけるみたいですね。ならなんとかいけそう。
次回の課題はpostMessageを使って、IE・FireFox・Chromeで動作確認する事です。

ブックマークレットのソース

javascript:(function (){

var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/05/set_youtube.js";
document.body.appendChild(s);

})()

youtubeで動画を見ながら起動してください。FireFoxのみ。

第5回のブックマークレット

Home > Tags > iframe

twitter
リンク

Return to page top