IE11でUikitのクリックイベントがファイルダウンロード後に作動しなくなる

対象ブラウザ：IE11
PHPバージョン：7.2.13
Uikitバージョン：3.0.3

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <link type="text/css" href="uikit/css/uikit.min.css" rel="stylesheet">
9    <script type="text/javascript" src="uikit/js/uikit.min.js"></script>
10    <script type="text/javascript" src="uikit/js/uikit-icons.min.js"></script>
11</head>
12<body>
13    <section class="uk-position-center">
14    <div>
15        <span uk-toggle="target: #offcanvas-overlay; mode: click" uk-icon="cog"></span>
16    </div>
17    <div>
18      <div><a href="test.php?action=get_csv_file">CSVダウンロード</a></div>
19    </div>
20
21    <div id="offcanvas-overlay" uk-offcanvas="overlay: true">
22        <div class="uk-offcanvas-bar">
23            <button class="uk-offcanvas-close" type="button" uk-close></button>
24            <h3>テスト</h3>
25        </div>
26    </div>
27    </section>
28
29</body>
30</html>

お世話になります。

現在Uikitのuk-toggleを使用してmodalやoffCanvasを表示している処理で、
ファイルのダウンロード後、処理を行おうとすると「SCRIPT2343: 次の行でスタックオーバーフローが発生しました:」
というエラーメッセージが表示され、画面がフリーズしたような状態になります。

Uikit以外の自前で用意したjavascriptの処理は動きますが、uikit関連の処理だけ上記のエラーが表示されます。

ファイルのダウンロード処理はphp側でCSVファイルを生成しダウンロード処理を行っており、
ダウンロード時に「HTML1300: ナビゲーションが発生しました」「HTML1527: DOCTYPE を指定する必要があります。有効な HTML5 doctype である "<!DOCTYPE html>" の追加を検討してください。」
というメッセージも表示されます。

何が原因なのかまったく分からず、手詰まりな状況です。
解決方法やその他手がかりになるような情報をいただければありがたいです。
上記のコードは一部抜粋したもので、必要であればその他情報も追記いたします。

追記１

IE11で取得したレスポンスヘッダーが下記になります。
応答 HTTP/1.1 200 OK
Server nginx/1.12.2
Date Tue, 09 Apr 2019 05:58:18 GMT
Content-Type application/octet-stream
Content-Length 1605666
Connection keep-alive
X-Powered-By PHP/7.0.33
Cache-Control no-cache, must-revalidate
Expires Sat, 26 Jul 1997 05:00:00 GMT
Content-Disposition attachment; filename=data.csv
Content-Transfer-Encoding binary

追記２

ファイルダウンロード処理時の処理関数になります。

php
1function send_download_file_path($download_filename, $file_path)
2{
3    $ua = $_SERVER['HTTP_USER_AGENT'];
4    if (preg_match('/Windows/', $ua)) {
5        $download_filename = mb_convert_encoding($download_filename, "SJIS-win", "UTF-8");
6    }
7
8    header("Cache-Control: no-cache, must-revalidate");
9    header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
10    header('Content-Type: application/octet-stream');
11    header('Content-Disposition: attachment; filename='.$download_filename);
12    header('Content-Transfer-Encoding: binary');
13    header('Content-Length:' . filesize($file_path));
14
15    ob_end_clean();
16
17    readfile($file_path);
18    unlink($file_path);
19    exit;
20}

よろしくお願いいたします。

x_x

2019/04/09 05:33

CSVファイルのレスポンスヘッダはどうなっているでしょうか？また、ダウンロードを右クリック→「対象をファイルに保存」とすればどうなりますか？

annderber

2019/04/09 06:03 編集

ありがとうございます。ヘッダー情報追記いたしました。右クリックからの対象ファイルに保存を行うと、「名前を付けて保存」の画面がポップアップされて保存することができます。ご確認お願いいたします。

x_x

2019/04/09 06:06

その場合はエラーは起こらないということでしょうか？

annderber

2019/04/09 06:16 編集

すいません、肝心な部分を確認していませんでした。「名前を付けて保存」から行った場合、エラーは起こらず正常に動きます。また、「HTML1527: DOCTYPE を指定する必要があります。有効な HTML5 doctype である "<!DOCTYPE html>" の追加を検討してください。」という警告メッセージも消えました。これでレスポンスヘッダーが原因ということになりますが、何が足りないのでしょう。合わせてPHP側のヘッダーを指定している箇所の処理も追記いたします。確認いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

ダウンロードするのであれば、target属性で別ウィンドウで開くのはどうでしょうか？
(IE は download属性に対応していないので)

HTML
1<a href="test.php?action=get_csv_file" target="_blank" rel="noopener">CSVダウンロード</a>

投稿2019/04/09 06:32

x_x

総合スコア13749

annderber

2019/04/09 06:48 編集

ありがとうございます。いただいた内容で問題なく動作いたしました。大変助かりました。とりあえずこれで問題は解決しましたが、IE11で表示される「HTML1527: DOCTYPE を指定する必要があります。有効な HTML5 doctype である "<!DOCTYPE html>" の追加を検討してください。」はなぜ表示されるのでしょうか。ヘッダー情報の出力には特に間違えは無いと思っているのですが、別ウィンドウを出すことなく処理を行えるのが一番理想なのですが、こちらで色々調べてみても直接繋がるような情報が出てきませんでした。また、これが原因でUikitの処理がオーバーフローを起こす理由もよく分かりません。内部でどんな処理が走っているのでしょう。問題自体は既に解決しましたので、あくまで何かご存じであればコメントいただければと思います。