各サイトに埋め込めるタグなどを配布側として開発する場合の注意です。 (例：Tweet Feed)
おもにiframeまわりの話となります
埋め込みスクリプト
以下みたいなのを各サイトに埋め込んでもらう前提です。
<div id ='hoge'></div>
<script type="text/javascript">
(function() {
var js = document.createElement('script'){
js.async = true;
js.src = '//yourOrigin/hoge.js';
document.getElementsByTagName('head')[0].appendChild(js);
})();
</script>
要するに、各サイトに//yourOrigin/hoge.js を読み込んでもらいます。
hoge.js は$('#hoge') 内にiframeを作成して埋め込みたいコンテンツをロードしたり、子フレームからのイベントのハンドリングをしたりします。
以下、注意点をつらづら書いておきます
cross origin
- 異なるドメイン間で、親フレーム ⇔ 子フレーム間のjavascriptでの直接通信はできません 例：
window.parent.hoge() -
postMessageで子フレームからイベントを送り、親フレームでイベントをハンドリングしてください - どうしてもやりたいときは、孫フレームとして親フレームと同じドメインを用意するとよいです（今回の用途からは外れますが）
https
- 親フレームがhttpsの場合に、子フレームとしてhttpが埋め込めないブラウザがあります (chromeなど)
- 子フレーム内コンテンツのSSL対応は必須と考えたほうが良いかもしれません
子フレーム起因でページ遷移する場合
子フレーム内のリンクをクリックした際に、子フレーム内でページ遷移するのは変ですよね。
ですので以下などをしてあげることになると思います
- 方法1:
postMessageして親フレームがイベントを受け取って遷移する - 方法2: 子フレーム内で
window.openする
方法1
location.href してください。理由は以下。
親フレームがwindow.openすると、「ユーザーの意図しないタイミングでウィンドウ開こうとしてるだろう！ポップアップブロックするぞ！」と主要ブラウザさんに怒られてしまいます。
例えばiOS Safariではポップアップブロック機能がデフォルトでONになっています。さらにブロックされたことが通知されないため、ユーザー視点で何も起こりません。
方法2
シンプルで良い方法なのですが、Android2.xの標準ブラウザにて、UIが不自然(同タブ内でpopup画面として開かれる)になってしまいます。
Android2.xの場合は方法1にしてあげるとよさそうです。
Android2.xでも絶対にwindow.openがいい場合
もはやマニア向け。
Android2.x標準ブラウザでは、javascriptがDOM click eventを発火させた場合でも、ブラウザバグなのかユーザーのアクション起因とみなされ、ポップアップブロックが効きません。
(全端末で確かめた訳ではありません。念のため。)
親フレームが適当な要素のclick eventを発火させて、そのevent起因でwindow.openするとよさそうです。