GaroonカスタマイズコードがIEで動作しません。
解決策や原因がわかる方はいらっしゃいませんか？
経緯：
こちらで質問させていただいたように、
ワークフロー申請画面起動時、社員番号テキストボックスに、プロフィールから取得した従業員IDをプリセットする処理です。
Google Chromeでは問題なく動作しますが、IEでは動きません。
サンプルコード：
※リンク:https://js.cybozu.com/jquery/3.3.1/jquery.min.jsを適用済みの前提
garoon-input-employeeNumber.js
/*
* Garoon カスタマイズ サンプルプログラム
* Copyright (c) 2018 tomomo85
* Licensed under the MIT License
*/
window.onload = function() {
var host = location.origin;
/**
* ログインユーザー情報の取得
* https://developer.cybozu.io/hc/ja/articles/115003721263
*/
var user = garoon.base.user.getLoginUser();
/**
* ユーザーエクスポート API（JSON）
* https://developer.cybozu.io/hc/ja/articles/202363040#step2
*/
var params = '?codes[0]=' + user.code + '&offset=0&size=1';
var url = host + '/v1/users.json' + params;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function() {
var resp = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
$('input[name=item_999]').val(resp.users[0].employeeNumber);
}
};
xhr.send(null);
}
再現手順：
ブラウザIEを起動し、F12でデバッガーを立ち上げた状態でページを開くと、
「SCRIPT5: アクセスが拒否されました。」
var resp = JSON.parse(xhr.responseText);
の記述のところで、「SCRIPT1014: 文字が正しくありません。」とブレークしてしまいます。
responseTextの中身がjSONではなく「Bad Request 400」のエラーメッセージなので、ここがエラーになるのは当たり前なのですが、そもそも、なぜIEだとリクエストが通らないのでしょうか？
ブラウザはInternet Explorer 11を使用しています。
自分でももうちょっと調査してみますが、何か情報ありましたら教えてください。
以上、よろしくお願いします。
#IE #InternetExplorer #IE10 #IE11 #InternetExplorer10 #InternetExplorer11 #インターネットエクスプローラ #インターネットエクスプローラー #インターネットエクスプローラ10 #インターネットエクスプローラ11 #インターネットエクスプローラー10 #インターネットエクスプローラー11
またまた自己解決しました。
IEの応答の遅さが原因のようで、タイムアウト時間を明示したら、正しく動作しました。
/*
* Garoon カスタマイズ サンプルプログラム
* Copyright (c) 2018[tomomo85](/hc/ja/profiles/360697785406-tomomo85)
* Licensed under the MIT License
*/
window.onload = function() {
var host = location.origin;
/**
* ログインユーザー情報の取得
* https://developer.cybozu.io/hc/ja/articles/115003721263
*/
var user = garoon.base.user.getLoginUser();
/**
* ユーザーエクスポート API（JSON）
* https://developer.cybozu.io/hc/ja/articles/202363040#step2
*/
var params = '?ids[0]=' + user.id;
var url = host + '/v1/users.json' + params;
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // method, url, async, user, password
xhr.timeout = 1000;
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function() {
if (xhr.status === 200) {
var resp = JSON.parse(xhr.responseText);
var employeeNumber = resp.users[0].employeeNumber;
// 社員番号をセット
$('input[name=item_999]').val(employeeNumber);
}
};
xhr.onerror = function() {
console.log('error:' + xhr.responseText);
};
xhr.ontimeout = function() {
console.log('ontimeout:' + xhr.timeout + 'ms.');
};
xhr.send(null);
}
また、別件ですが、
「セレクトボックスまたはデータピッカーで日付を選択したら、タイトルに自動セットする」というカスタマイズコードも、
IEで「アクセスが拒否されました。」エラーとなりました。
根拠は見つけられませんでしたが、jQueryでiframe内の要素にアクセスする際、IEでは「contents()」という書き方がNGのようです。
以下のように変更したら正しく動作しましたので、Garoon×IEでハマっている方のために、置いておきます。（動作は自己責任です。）
修正前：
$('iframe').contents().find(要素).on(イベント, 処理);
修正後：
$('iframe').find(要素).on(イベント, 処理);
サンプルコード：
garoon-input-SetDateCal.js
// イベント定義
// タイトルは手入力できない
$('input.js_customization_input_item_\\$1').attr('readonly', true);
$('select#item_999_year').on('change', change);
$('select#item_999_month').on('change', change);
$('select#item_999_day').on('change', change);
// カレンダー選択値がセレクトボックスに反映されるまで、100ミリ秒待機
$('iframe[id$="item_999_SetDateCal"]').find('table.cal').on('click', setInterval(change, 100));
// ファンクション定義
function change() {
var y = $('select#item_999_year').val();
var m = $('select#item_999_month').val();
var d = $('select#item_999_day').val();
// 年月日すべて入力された場合、標題に[月/日]をセット
if (y && m && d) {
var title = '標題：' + m + '/' + d;
$('input.js_customization_input_item_\\$1').val(title);
}
}