[JavaScript] iframe で読み込み完了後に処理を実行するには onload イベントを使おう
- 2016 11/15
iframe 内のコンテンツの読み込みが完了したら何か処理をさせたい場合 onload イベントを使うことで実現できます。
iframe 内のコンテンツの読み込みが完了したら何か処理をさせたい場合 onload イベントを使うことで実現できます。
Facebook のページタブアプリ(iframe) にて、リダイレクト(redirect)処理を実行すると、画面が真っ白になって何も表示されない問題でハマりました。
■ サーバーの request/response ログ
HTTP/1.1 302 Moved Temporarily
P3P: CP=”IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT”
Location: https://www.facebook.com/pages/My-Page/xxxxxxxxxxxx?sk=app_xxxxxxxxxx
Content-Type: text/html; charset=utf-8
X-UA-Compatible: IE=Edge
Cache-Control: no-cache
X-Request-Id: 8700a35ce62854a9d99abc225bbb9903
X-Runtime: 0.002538
Connection: close
Server: thin 1.3.1 codename Triple Espresso
<html><body>You are being <a href="https://www.facebook.com/pages/My-Page/xxxxxxxxxxxx?sk=app_xxxxxxxxxx">redirected</a>.</body></html>
原因は、ifranme 内からリダイレクトを行なっているせいでした。
a タグに、target=”_top” を指定して、フレーム解除してやればOKです。
■ エラーで動かない例
<a class="btn" href="https://graph.facebook.com/oauth/authorize?client_id=xxxxxxxxxxxxxxx&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Fcallback&scope=email">Facebook Auth</a> |
■ 解決した例(target=”_top” を追加してる)
<a class="btn" href="https://graph.facebook.com/oauth/authorize?client_id=xxxxxxxxxxxxxxx&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Fcallback&scope=email" target="_top">Facebook Auth</a> |
以上です。