この問題を整理するのに約 5 時間を費やしたので、それをどのように克服したかを共有すると、誰かの役に立ち、時間を節約できると思いました (これはかなり最近の修正のようです - この質問を投稿した時点で 9 時間前 - これは私はここで見つけました）。
jQuery バージョン 1.10.1 を使用しています。
概要
Facebookタブアプリケーションを構築しています。これは、訪問者がいくつかの情報を入力し、最近の休日に撮った写真をアップロードするコンテスト エントリー フォームです。Facebook に埋め込む前に、フォームをすべてのブラウザで動作させています。
- フォームは を使用して送信され
$.post()ます。このプロセスで jQuery が指す PHP スクリプトは、フォーム自体と同じドメインにあります。 - フォームを送信する前に、ファイルをアップロードする必要があります。ファイルのアップロード プロセスは次のように構築されます。
<div>ボタンとして機能する があります。この div 内には、<input type="file" />不透明度が 0 に設定されたフィールドがあります。- 非表示のファイル入力をクリックすると、ユーザーはファイルを選択します。
- ファイルが選択されると、
.change()イベントがトリガーされ、<div>「もう一度クリックしてアップロードしてください」というテキストが表示されます。.change()調査中に、Internet Explorer は、ファイル入力に添付されたハンドラー内でフォームを送信することを好まないことがわかったので、ファイルをすぐにアップロードするのではなく、これを行いました。 - div をもう一度クリックすると、フォームが 経由で送信され
.submit()ます。フォームは非表示の iframe をターゲットにしています。ファイルのアップロードが完了し、iframe が.load()イベントをトリガーします。 - load イベントのハンドラーは
.contents().find("div").html()、ファイルのアップロードを管理する PHP スクリプトで送り返した文字列化された JSON を取得するために使用します。JSON には、ファイルのアップロードのステータスと、成功した場合は処理された画像への URL が含まれています。
問題
このアプリケーションは、Facebook に埋め込まれている場合、Internet Explorer を除くすべてのブラウザーで正常に動作します。Internet Explorer では、コンソールに次のように表示されました。
- SCRIPT5: アクセスが拒否されました。
- SCRIPT5009: '$' は定義されていません。
最初に 2 番目のエラーを調査したところ、次のような、遭遇すると予想され、既にチェック済みのすべてのものに遭遇しました。
- スクリプトへのパスが間違っています。
- ファイルへのアクセスをブロックしている htaccess ファイルが存在する可能性があります。
- スクリプトが正しく読み込まれていません。キャッシュなどをクリアしてから、もう一度お試しください。
- ロードされる前に jQuery を必要とするスクリプトを使用しようとしていた可能性。
これらすべてを再確認しましたが、そうではないことを確認しました。次に、「アクセスが拒否されました」というエラーに移りました。私が遭遇しているすべての資料は、AJAX を使用したクロスドメイン リクエストに関する問題を指摘しています。ファイルのアップロードについて具体的に言及している記事もいくつかありますが、この場合、私に 100% 関連する記事はありません。
質問
Facebook に埋め込まれたページで jQuery を使用しようとすると、Internet Explorer でこれらのエラーが発生するのはなぜですか? ページ上の他のすべてのスクリプト（jQueryを除く）を削除してもそれらを取得したため、画像のアップロードを処理するためにページにある非表示のiframeの存在によってトリガーされると思います.