質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,233

annderber

score 97

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link type="text/css" href="uikit/css/uikit.min.css" rel="stylesheet">
    <script type="text/javascript" src="uikit/js/uikit.min.js"></script>
    <script type="text/javascript" src="uikit/js/uikit-icons.min.js"></script>
</head>
<body>
    <section class="uk-position-center">
    <div>
        <span uk-toggle="target: #offcanvas-overlay; mode: click" uk-icon="cog"></span>
    </div>
    <div>
      <div><a href="test.php?action=get_csv_file">CSVダウンロード</a></div>
    </div>

    <div id="offcanvas-overlay" uk-offcanvas="overlay: true">
        <div class="uk-offcanvas-bar">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
            <h3>テスト</h3>
        </div>
    </div>
    </section>

</body>
</html>

お世話になります。

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

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

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

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

追記1

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

追記2

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

function send_download_file_path($download_filename, $file_path)
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if (preg_match('/Windows/', $ua)) {
        $download_filename = mb_convert_encoding($download_filename, "SJIS-win", "UTF-8");
    }

    header("Cache-Control: no-cache, must-revalidate");
    header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.$download_filename);
    header('Content-Transfer-Encoding: binary');
    header('Content-Length:' . filesize($file_path));

    ob_end_clean();

    readfile($file_path);
    unlink($file_path);
    exit;
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2019/04/09 14:33

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

    キャンセル

  • annderber

    2019/04/09 15:03 編集

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

    キャンセル

  • x_x

    2019/04/09 15:06

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

    キャンセル

  • annderber

    2019/04/09 15:15 編集

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/09 15:39 編集

    ありがとうございます。

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

    キャンセル

  • 2019/04/09 16:41

    動きから推測した対症療法なので、詳しくはわかりません。
    どちらかというと Uikit がやらかしているような気がしますが……。
    何かわかれば追記しますが、期待できません^^;

    キャンセル

  • 2019/04/09 18:04

    いえ、ありがとうございました。
    これで閉じさせていただきます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る