はじめに

Local環境にてXMLファイルからJavascriptを使って情報を取得する方法について自分なりにプログラムを作成してみたのでまとめました。
ニッチな内容でほとんどの人に役に立たないことかもしれませんが、ハードを使う事業をしている人にとっては割と役に立つのではないかと思います。
困っている方がいればその人に役立てばなと思っています。

やりたいこと

ブラウザにてHTMLファイル（get_local_xml.html）に埋め込んだJavascriptを動かして、ローカル上にあるXMLファイル（config.xml）から情報を取得したい。

XMLHttpRequestではなぜダメなのか。

XMLHttpRequestでコードを書いてみたのですが、下記リンク先の通りセキュリティでエラーが出てしまいました。。

javascriptでxmlファイルを読み込ませようと、IEでエラーになる
- https://teratail.com/questions/18457
[IE9でのJavascript] window.XMLHttpRequestを使用したローカルファイル読み込みについて
- https://answers.microsoft.com/ja-jp/ie/forum/ie9-windows_7/ie9%e3%81%a7%e3%81%aejavascript/a6d34ed2-2e50-495b-a648-1fdeb2de9090?msgId=724c2c40-4a46-4e22-b316-3c0098dca056

ActiveXObjectを使えばローカル上のファイルからも情報を取得できる。

ActiveXObject オブジェクト
- http://akon.sakura.ne.jp/map/activexobject.htm

コード実装

get_local_xml.html　に埋め込んだ Javascript を動かして、 config.xml の informationタグの1つ目の value の値を取得する。

ポイント
- jQuery 1.9.1 をローカルから参照する。（jQuery 3系では動かない）
- 外部ファイルの内容を text データで出力されるので、XMLに変換して取得したい情報をとる。

config.xml

<?xml version="1.0" encoding="Shift_JIS"?>
<configuration>
  <!-- 下の "1" という値を取得したい -->
  <information value="1"/>
  <information value="2"/>
  <information value="3"/>
  <information value="4"/>
  <information value="5"/>
</configuration>

get_local_xml.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>get_local_xml</title>
  </head>
  <body>
    <!-- jquery 読み込み (3系だと使用できない) -->
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
      // Microsoft.XMLHTTP が使えない場合は XMLHttpRequest
      $.ajaxSetup({
        xhr: function() {
            try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return new XMLHttpRequest(); }
        }
      });

      // 外部ファイルのパス、参照したいファイル先に書き換える
      var config_path = 'config.xml';

      $.ajax(config_path, {
        complete: function(e){
            // 外部ファイルの内容を text データで出力
            var data = e.responseText;

            // text -> xml 変換
            var dom_parser = new DOMParser();
            var document_obj = dom_parser.parseFromString(data, "text/xml");

            // xml から information を抽出
            // ご自身が使う xml の内容に合わせて、コードを変更してください。
            console.log(document_obj.documentElement.getElementsByTagName("information")[0].getAttribute("value"));
        }
      });
    </script>
  </body>
</html>

ローカル環境のみで完結させたいため、下記リンク先を参照する訳ではなくコードを丸々コピーする。
ちなみにこの方法だと、jQuery 3系だと動かないため注意。

jQuery 1.9.1
- https://code.jquery.com/jquery-1.9.1.js

jquery-1.9.1.js

// 上記のリンクからここにコピーする。
// ローカル環境のみで完結させたいため、リンク先を参照する訳ではなくコードを丸々コピーする。

まとめ

ブラウザはローカル環境にて使用されることを想定していないと思いますので、使用する際は必ず検証を行なった上で使ってみてください。

参考

ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法
- https://qiita.com/nissuk/items/1ede2953a8661dc59214
[その他] ChromeにてAjaxでローカルファイルにアクセス
- https://qiita.com/cigalecigales/items/33afaa42f91542ffa62e
DOMParser について
- https://hakuhin.jp/js/dom_parser.html

Local環境のXMLファイルからJavascriptを使って情報を取得する方法

はじめに

関連リンク

やりたいこと

XMLHttpRequestではなぜダメなのか。

ActiveXObjectを使えばローカル上のファイルからも情報を取得できる。

コード実装

まとめ

参考