クロスドメインのajaxリクエストを機能させることができました。私が今抱えている問題は、これは最初の送信で機能するが、ページを更新せずにそれ以降の送信はブラウザのドメインセキュリティチェックに違反することです。
ローカルマシンに2つのドメインがあります。「www.webservice.dev」および「www.consume.dev」。
消費.devに、そのようにWebサービスでホストされているいくつかのjsを挿入します。
<script type="text/javascript">
$(function(){
var $scrpt = $('<script />');
$scrpt.attr({
'type' : 'text/javascript',
'src':'http://www.webservice.dev/_assets/script/processEvent.js'
});
$('head').append($scrpt);
});
</script>
そのスクリプトには次のものが含まれています。
$(function() {
var $scrpt = $('<script />');
$scrpt.attr({
'type' : 'text/javascript',
'src' : 'http://www.webservice.dev/_assets/script/jquery/plugins/jquery.form/jquery.form.js'
});
$('head').append($scrpt);
$('<iframe />')
.attr({
'id' : 'eventFormTarget',
'name' : 'eventFormTarget'
})
.css( {
'width' : '1px',
'height' : '1px',
'position' : 'absolute',
'left' : '-9999px',
'top' : '-9999px'
})
.prependTo('body');
$('#event-form').bind('submit', function(){
$(this).ajaxSubmit({
url : 'http://www.webservice.dev/webservices.php',
type : 'POST',
dataType : 'html',
data : {
ajax : 'true',
webservice : 'processEvent'
},
error : function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
/*
* try{ $('#event-form').trigger('submit'); }catch(e){
* console.log(e); };
*/
},
complete : function(){
},
iframeTarget : '#eventFormTarget',
iframe : true
});
return false;
});
});
スクリプトから、ページにiframeを追加し、jqueryフォームプラグインを使用して魔法を実行していることがわかります。投稿はiframeを介して行われるため、ajaxSubmitはプロセスへの応答を取得しません-私はそれを他の場所で処理します...
しかし、エラー応答は利用可能です。
フォームの最初の送信時にエラーも検出されず、webservice.devで処理コードの結果を確認できます。別のリクエストが送信されるとすぐに、エラーイベントがトリガーされ、Chromeコンソールで次のようになります（Firebugは非常に似ています）。
Unsafe JavaScript attempt to access frame with URL http://www.nmssys.dev/webservices.php from frame with URL http://dev.dev/. Domains, protocols and ports must match. jquery.form.js:904
[jquery.form] Server abort: TypeError: Cannot read property 'readyState' of undefined (TypeError)
Unsafe JavaScript attempt to access frame with URL http://www.nmssys.dev/webservices.php from frame with URL http://dev.dev/. Domains, protocols and ports must match. jquery.form.js:904
[jquery.form] aborting upload... aborted
Object "aborted" "server abort"
私のコードで、エラーをキャッチしてさらに送信をトリガーしようとしていることに気付くかもしれません。これは成功しますが、結果は異なります。Firefoxでは、さらに1回送信するだけで成功するようですが、chromeではさらに3〜5回送信できます。
私はこれらすべてのシャナニガンを防ぐ解決策を心から望んでいます。iframeの削除と再読み込みのようなもの-またはajaxsubmitバインディングの更新...
どんなアイデアでもありがたいです。