JavaScript（ブックマークレット）

Question

実現したいこと

ブックマークレット実行中はedge（IEモード）のアラートを表示しないようにしたい。

発生している問題・分からないこと

edge（IEモード）を利用しています。※このモードでしか表示できないブラウザです。

作業効率の確認のために、ブックマークレットを使った方法でテーブルデータを取得してcsvファイルへ出力しているのですが、元々の仕様（JavaScript）でテーブルデータが0件の時にfunctionで関数が呼び出されwebからのメッセージとしてこの担当者はデータがありません。アラートがでるようになっています。

アラートがでてしまうと、ブックマークレットの動作が止まってしまい次の担当者の検索に移りません。

どうにかアラートを無効にする関数などを入れてみたのですが、無効にならずアラートがでてきます。。。

ご教示いただける方がいましたら幸いです。

該当のソースコード

javascript:(function() {
    // ファイル入力要素を作成
    var input = document.createElement('input');
    input.type = 'file';
    input.accept = '.js';
    
    // ファイルが選択されたときの処理
    input.onchange = function(e) {
        var file = e.target.files[0];
        var reader = new FileReader();
        
        // ファイルの読み込みが完了したときの処理
        reader.onload = function(event) {
            try {
                // ファイルの内容を取得
                var content = event.target.result;
                // 配列データを抽出
                var idData = eval(content.substring(content.indexOf('['), content.lastIndexOf(']') + 1));
                var allData = "";
                
                // データを検索する関数
                (function search(index) {
                    // インデックスが配列の長さを超えた場合はCSVをダウンロード
                    if (index >= idData.length) {
                        downloadCSV(allData);
                        return;
                    }
                    
                    // メッセージフレームのドキュメントを取得
                    var frameDoc = window.frames["custom_frame_1"].document; // IDを変更
                    var customCode = frameDoc.getElementsByName("customCode")[0]; // IDを変更
                    var customName = frameDoc.getElementsByName("customName")[0]; // IDを変更
                    var customButton = frameDoc.getElementsByName("customButton")[0]; // IDを変更
                    
                    // フォームが存在する場合
                    if (customCode && customName && customButton) {
                        // 値を設定
                        customCode.value = idData[index][0];
                        customName.value = idData[index][1];
                        frameDoc.getElementsByName("customFlag")[0].checked = true; // IDを変更
                        customButton.click();
                        
                        // 結果が返ってくるまでの処理
                        setTimeout(function() {
                            executeBookmarklet2();
                            var checkResults = setInterval(function() {
                                var frame2Doc = window.frames["custom_frame_2"].document; // IDを変更
                                var rows = frame2Doc.querySelectorAll("[id^='custom_row_']"); // IDを変更
                                
                                // 行が存在する場合
                                if (rows.length > 0) {
                                    clearInterval(checkResults);
                                    Array.prototype.forEach.call(rows, function(row) {
                                        // 行データを取得
                                        var rowData = Array.prototype.slice.call(row.cells).map(function(cell) {
                                            return cell.innerText;
                                        });
                                        // CSVデータに追加
                                        allData += customName.value.trim() + "," + rowData.slice(2).join(",") + "\n";
                                    });
                                    // 次のインデックスで検索を続ける
                                    search(index + 1);
                                } else {
                                    clearInterval(checkResults);
                                    // 次のインデックスで検索を続ける
                                    search(index + 1);
                                }
                            }, 1000);
                        }, 1000);
                    }
                })(0);
            } catch (e) {
                console.error('Error parsing file: ' + e.message);
            }
        };
        
        // ファイルをテキストとして読み込む
        reader.readAsText(file);
    };
    
    // ファイル選択ダイアログを開く
    input.click();
    
    // メッセージフレーム2の選択を処理する関数
    function executeBookmarklet2() {
        var select = document.getElementsByName('custom_frame_2')[0].contentWindow.document.getElementsByTagName('select')[0]; // IDを変更
        if (select) {
            select.selectedIndex = 1;
            if (typeof select.onchange === 'function') select.onchange();
        }
    }
    
    // CSVをダウンロードする関数
    function downloadCSV(csv) {
        var bom = "\uFEFF"; // UTF-8 BOM
        var blob = new Blob([bom + csv], { type: 'text/csv;charset=utf-8;' });
        
        // IE用の処理
        if (window.navigator.msSaveBlob) {
            window.navigator.msSaveBlob(blob, 'data.csv');
        } else {
            var link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', 'data.csv');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
})();

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

window.alert = function()

補足

特になし

Comments

[juner]

`window.alert = function()`
これは
`window.alert = function(){}`
の意味でしょうか？
それともそのまま書いてエラーになったとかでしょうか？

[aoiname]

試したコードは下記になります。
window.alert = function() {};
window.customMessages = function(messages) {};

上記を試してもエラーなどはでないのですが、アラートが無効化されません。
customMessagesは元々の仕様で呼び出されている関数名になります。
アラートがでるブラウザの仕様としては
フレーム1にある検索ボタンをクリック→フレーム2にテーブルデータを表示→0件だったらアラートがでる。仕組みになっています。

[juner]

対象となるページの alert はブラウザ標準のものでしょうか？
また、変数として宣言されたりしておりませんでしょうか？
（例えば function スコープ内で var alert = window.alert; と宣言されていたりすると変更できませんので。

[aoiname]

私が無知すぎて申し訳ないです。。

対象ページを調べたところ、window.alert　となる文字は存在しませんでした。

[juner]

例えば var alert や var hoge = alert の様な alert を取り扱う変数はありますでしょうか？（トップレベルでなければ宣言は window.alert とは別になりますので。
※ javascript を 圧縮したりすると var a = alert の様に関数自体を短縮の為に代入したりする場合もあります。

[aoiname]

偽名にはなりますが、下記のような作りで作成されています。

* エラーメッセージのダイアログ

function customMessages(messages, customdialog, customAction, customFlag, customTarget) {
・
・
・
・
・
if (messages[i][1] != "") {
if (message == "") {
message = messages[i][1];
} else {
message = message + "\n" + messages[i][1];
}
}
}

if (customdialog == 0) {
alert(message);

[attercop]

フレーム内のスクリプトがalert出してる場合は、フレーム内のalertを無効化する必要があると思います。
フレーム内のドキュメント読み完了時にalertが表示されるのでしたら難易度は高そうですが。。。

[juner]

あー！複数の window (iframe も 独立した windowを持つ) 問題！
https://developer.mozilla.org/ja/docs/Web/API/HTMLIFrameElement/contentWindow

[otn]

> テーブルデータが0件の時にfunctionで関数が呼び出され
ですが、これは掲載コードのどの部分のことでしょうか？

[juner]

で、 iframe は含まれているのでしょうか？

[aoiname]

回答が遅くなり申し訳ございません。
フレームは下記のように1.2とあり、iframeは含まれる形となっております。
フレーム1で検索ボタンを押下
フレーム2に検索結果のテーブルデータが表示されます。

<frame name="custom_frame_1" id="custom_frame_1" src="URL" marginwidth="" marginheight="" scrolling="">
<frame name="custom_frame_2" id="custom_frame_2" src="URL" marginwidth="" marginheight="" scrolling="">

また、HTML側で下記の文があり、こちらで呼び出される状況となっております。
<script language="JavaScript">
customMessage(
new Array(
new Array("", "アラート文言")
)
,0, '', '', '', ''
)
</script>

[juner]

frame ごとにコンテキストは違うので 全ての alert を変更する必要があると思われますね。

```js
[].concat([].map.call(document.querySelectorAll('frame, iframe'), function(e) { return [e.src, e.contentWindow]} ), [[location.href, window]])
.forEach(function(e) {
var window = e[1];
var url = e[0];
try {
window.alert = function alert() {}
console.log('success: ', url, window);
} catch(e) {
console.error('error: ', url, e);
}
});
```

Answer 1

IEでも動作する それぞれの コンテキストの window.alert を変更するコードであるなら次の様な感じでしょうか？
実際の オリジンがどういう状態かまでは知らない為、 エラー対策をしてそんな感じです。

[].concat([].map.call(document.querySelectorAll('frame, iframe'), function(e) { return [e.src, e.contentWindow]} ), [[location.href, window]])
.forEach(function(e) {
    var window = e[1];
    var url = e[0];
    try {
        window.alert = function alert() {}
        console.log('success: ', url, window);
    } catch(e) {
        console.error('error: ', url, e);
    }
});

以上。

参考資料

https://developer.mozilla.org/ja/docs/Web/API/HTMLIFrameElement/contentWindow