iframeでJavaScript

675 views
Skip to first unread message

Andy Matsubara

unread,
Mar 19, 2011, 2:19:19 PM3/19/11
to chrome-api-d...@googlegroups.com
はじめまして,Andyともうします。

Chromeの機能拡張を初めて作っているのですが,ブラウザのコンテキスト・メニューから選んだときにLightboxのような形で表示をして,その内容をiframeにできないかと考えています。

コンテント・スクリプトにURLを渡すことでiframeにページを表示させることはできるようになったのですが,そのiframe内のページではJavaScriptが動いていないようなのです。これを動かすにはどうしたらいいでしょうか?
パーミッションかなと調べたのですが,よく分かりませんでした。

初心者の質問で要領を得ていないかもしれませんがよろしくお願いします。

Andy

Snsk Matsuki

unread,
Mar 20, 2011, 1:31:36 AM3/20/11
to chrome-api-d...@googlegroups.com, Andy Matsubara
Andyさん

はじめまして。snskと申します。

> パーミッションかなと調べたのですが,よく分かりませんでした。

Same Origin Policy に引っかかってませんか?
https://developer.mozilla.org/ja/Same_origin_policy_for_JavaScript

対象としているiframeのホスト名が異なっていたりする場合 document オブジェクト以下をいじろうとすると失敗します。

ご参考まで。

2011年3月20日3:19 Andy Matsubara <andyma...@gmail.com>:

> --
> このメールは Google グループのグループ「Chrome API Developers JP」の登録者に送られています。
> このグループに投稿するには、chrome-api-d...@googlegroups.com にメールを送信してください。
> このグループから退会するには、chrome-api-develop...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/chrome-api-developers-jp?hl=ja からこのグループにアクセスしてください。
>

--
shi...@gmail.com - snsk

Nori Hamamoto

unread,
Mar 20, 2011, 1:36:23 AM3/20/11
to chrome-api-d...@googlegroups.com
おお、なんてタイムリーな!!
私も丁度、iframeでサイトを超えて通信できないか調べてたところです。

どうもこんな方法があって、これで解決できるようです。

参考にしてみてください。
Nori


2011/3/20 Snsk Matsuki <shi...@gmail.com>

えーじ

unread,
Mar 20, 2011, 2:01:58 AM3/20/11
to chrome-api-d...@googlegroups.com
iframe間でのクロスドメイン通信には色んなハックがありますが、Chromeを含むHTML5対応ブラウザであれば、postMessageを使ったやり方をお勧めします。

こちらは非常に分かりやすいサンプルと思われます:

Nori Hamamoto

unread,
Mar 20, 2011, 2:16:22 AM3/20/11
to chrome-api-d...@googlegroups.com
おお!!そんな方法もあったんですね。
HTML5 でサポートされてるってことは、やはりクロスドメイン通信は時代の要請なんですね。

のり

2011/3/20 えーじ <age...@google.com>

Andy Matsubara

unread,
Mar 20, 2011, 2:41:03 AM3/20/11
to chrome-api-d...@googlegroups.com
JavaScriptが動いていなかったのは結局単純なSyntax Errorでした。お騒がせしました。
ただ,その後今度はクロスドメイン通信でまた引っかかっており,紹介いただいたページなどを
勉強して対処したいと思います。ありがとうございました。

Andy

2011/3/20 Nori Hamamoto <nori...@gmail.com>:

Nori Hamamoto

unread,
Mar 27, 2011, 9:19:47 AM3/27/11
to chrome-api-d...@googlegroups.com
こんにちは

postMessage ですが、Frirefox の どのバージョンからサポートされているかわかりますか?
iframe のクロスドメインを使ったサービスを作っているのですが、先に書いた@ITの記事にある方法が、Firefox で動かないことが判明したのです。
ネットで調べてみると、Firefox のセキュリティポリシーが他のブラウザと違うことが原因のようで。なので、ブラウザ判定して、Firefox の場合だけpostMessage を使ってみようかと。

postMessage を使えるバージョンのFirefox の普及状況で、postMessage でいけるかどうか検討したいと思います。

宜しくお願いします。
Nori

2011/3/20 Andy Matsubara <andyma...@gmail.com>

Shogo Ohta

unread,
Mar 27, 2011, 10:17:09 AM3/27/11
to chrome-api-d...@googlegroups.com
こんにちは、太田です。
postMessageはFirefox3からサポートしていますよ。
https://developer.mozilla.org/Ja/DOM/Window.postMessage

ちなみに、Opera10以上、IE8以上もpostMessageをサポートしています。
あまり脚光を浴びることのないAPIですが、実は結構普及が進んでいます。

ただ、メッセージをやりとりする際のデータが形式が実装によってまちまちな点に注意が必要です。
上記のFirefoxのドキュメントには文字列データと書かれていますが、
最新の仕様ではany messageとなっていて文字列以外の大抵のデータをそのまま送信できます。
(正確にはstructured cloneアルゴリズムに従ってコピーされたデータが送信されます)
最近は仕様にあわせてオブジェクトをそのまま渡せる実装も増えていますが(もちろんChromeはOKです)、
無難に行くなら文字列でやり取りして、必要に応じてJSON.parse/stringifyを介してオブジェクトに変換すると良いでしょう。

折角なので、JSONとstructured cloneの違いについても書いておきます。
JSONは文字列・数値・真偽値・nullの4つの形式とそれらを含んだ配列・ハッシュという限られたデータ表現しか持っていません。
そのためJavaScriptにおけるDateオブジェクトや正規表現、CanvasのImageDataやFileAPIのBlobなどのデータ形式は(直接)JSON化できません。
対して、structured cloneはそういったJavaScriptのオブジェクトも基本的にコピー可能です(さすがにDOM
Nodeや関数とかは駄目ですが)。

ちょっと話がそれてしまいましたが、参考になれば幸いです。

2011年3月27日22:19 Nori Hamamoto <nori...@gmail.com>:

Nori Hamamoto

unread,
Mar 27, 2011, 11:00:19 AM3/27/11
to chrome-api-d...@googlegroups.com
太田さん、
早速の変身ありがとうございました。

Structured Clone のHeads up も素晴らしいです。
そんな仕様が出来つつ有るんですね。
HTML5 まだまだ勉強し初めて無いのですが、(postMessageが最初)Webの未来を感じますねー。

こういう話題の脱線ならWelcome です!!
ありがとうございました。

Nori

2011/3/27 Shogo Ohta <os0...@gmail.com>
Reply all
Reply to author
Forward
0 new messages