CORS制限付き外部iframeのfocusイベントを取得する

やりたいこと

メインページ上の外部iframeをクリックした時に、メインページで特別な処理をしたい。

具体的には、Bloggerの埋め込みコメントフォームをクリックした時に処理を実施したい。Bloggerの埋め込みコメントフォームは、www.blogger.com上にあり、ブログURLブログ名.blogspot.comと異なるため、CORS（Cross-Origin Resource Sharing）の制限を受けます。また、外部サービスでありサーバーを変更できないため、CORS制限を解除することもできません。

※これ以降にでてくるdocument.getElementById('comment-editor')は、コメントフォームのiframe要素です。

失敗した方法

iframe内で発生したイベントは、取得できませんでした。

document.getElementById('comment-editor').addEventListener('click', function() {
  console.log('iframe clcik');
});
document.getElementById('comment-editor').addEventListener('focus', function() {
  console.log('iframe focus');
});
window.addEventListener('click', function() {
  console.log('window click');
});
window.addEventListener('focus', function() {
  console.log('window focus');
});

成功した方法

メインページのフォーカスが失われたタイミングで問題のiframeがフォーカスを獲得していることを確認しています。フォーカスを獲得しているのならば、クリックやタブ移動などの方法でフォーカスがあたったことになります。クリックに限定できていませんが、入力可能な状態へ移行したと考えれば大差ないので良しとします。

window.addEventListener('blur', function() {
  var editor = document.getElementById('comment-editor');
  if (editor == document.activeElement) {
    console.log('comment-editor focus');
    // ここで処理する
  }
});

補足

もしも、CORS制限を受けないのであれば、次のコードでイベントを取得できるはずです。

document.getElementById('comment-editor').contentWindow.document.addEventListener('click', function() {
  console.log('iframe clcik');
});