UploadiFiveと一緒にWindow postMessage Pluginというプラグインを使用してファイルをサーバーにアップロードし、アップロード スクリプトが埋め込まれた Web ページにファイル リンクを挿入します。デスクトップデバイスでうまく機能します (Firefox (v26) および Chrome (v31) でテスト済み)。
iPad (Safari を使用して iOS 7.0.4 を実行) と Android Phone (Android 4.3 ストック ブラウザを実行) で試してみると、ファイルは意図したとおりにアップロードされますが、ファイルが挿入されません。デスクトップでは機能するのにモバイルでは機能しない理由はありますか?
これが私のコードです:
JS
この JS は、アップロード スクリプトからファイル名を取得し、ファイルを挿入する場所をターゲットにして、ファイルの種類に基づいてコードを挿入します。
pm.bind("message5", function(data) {
var ext = data.split('.').pop().toLowerCase();
myFrame = $('#editorf').contents().find('body');
nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');
if (ext=='jpg' || ext=='jpeg' || ext=='bmp' || ext=='gif' || ext=='png' || ext=='tiff' || ext=='tif'){
nestedFrame.append($.parseHTML(' <br><br> <a href="http://www.domain.net/uploads/' + data + '" class="fancybox"><img style="max-width:250px;" class="forum-image" src="http://www.domain.net/uploads/' + data +'"/></a>'));
} else if (ext=='pdf') {
nestedFrame.append($.parseHTML(' <br><br> <a target="_blank" href="http://www.domain.net/uploads/' + data + '">View Uploaded PDF</a>'));
} else {
nestedFrame.append($.parseHTML(' <br><br> <a href="http://www.domain.net/uploads/' + data + '">Download Uploaded File</a>'));
}
});
UploadiFive JS
$('#file_upload').uploadifive({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : "<?php echo md5('unique_salt' . $timestamp);?>"
},
'uploadScript' : '/js/uploadify/uploadify.php',
'onUploadComplete' : function(file, data) {
var fileUploaded = data;
pm({
target: window.parent,
type: "message5",
data:fileUploaded
});
}
});
これをモバイル デバイスで動作させるにはどうすればよいですか?
注: jQuery 2.0.3 を使用しています。
アップデート
問題を解決してデバッグするために、Edge Inspect を使用してみました。Edge Inspect でコードを実行すると、うまくいきました。iOS と Android でわかることから、ストック ブラウザでは機能しません。なぜだろうと困惑しています。