Загрузка локальных файлов с помощью Javascript без веб-сервера

Мне нужно написать программное обеспечение, использующее HTML5 и холст.

Все программное обеспечение должно работать локально, без необходимости сервера. Поэтому я могу использовать Javascript, не php.

Трудная часть: мне нужно динамически извлекать содержимое текстовых файлов, которые необходимы во время работы.

Например: Когда программа запускается, мне нужен "config.json". И после того, как пользователь сделал некоторые подозрения, мне нужен "story1.txt" или "story2.txt" и т.д.

Моя проблема:

Я не могу использовать Ajax, потому что Chrome блокирует его - локальным файлам не разрешено получать содержимое других файлов. Я всегда получаю сообщение об ошибке.

Что я пробовал до сих пор:

  • Загрузка файлов с помощью Ajax и jQuery

    Chrome не позволяет мне загружать файл

  • Загрузите файл в script -Tag

    Даже если я объявлю JSON файл как js-Code, я не могу получить доступ к содержимому загруженного файла

  • Загрузите файл в невидимый iframe и прочитайте его содержимое

    Загрузка работает, и я вижу код. Но когда я пытаюсь получить доступ к содержимому IFrame, я снова получаю сообщение об ошибке Chrome:

    "Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."
    

Вопрос:

Есть ли способ загрузить текстовый файл динамически или я вынужден использовать веб-сервер?

Ответ 1

Если вы настаиваете на использовании Chrome, у него есть несколько флагов командной строки, чтобы разрешить доступ к/из локальных файлов (--allow-file-access-from-files/--disable-web-security). Обратите внимание, что вам нужно запускать весь браузер с нуля с помощью этих флагов - то есть, если уже есть какие-либо другие флаги открытых окон Chrome, это не будет иметь никакого эффекта, и этот эффект сохраняется во всех окнах, пока Chrome не будет закрыт, что, очевидно, огромная дыра в безопасности.

Вы можете настроить легкий локальный сервер, если вы упакуете свое "приложение" с помощью какой-либо автоматической настройки script. Это все еще не очень хорошо, потому что вам нужно будет установить исполняемый файл, который пользователь может не захотеть или даже полностью не сможет установить из-за ограничений.

Вы можете упаковать свое приложение на основе HTML/JS в качестве расширения Chrome. Расширения имеют гораздо более широкие права доступа, чем случайный код, но тогда вам нужно будет либо распространять его через Google Play, либо предоставить инструкции по установке вручную расширений для ваших пользователей.

И, наконец, вы можете отформатировать все данные, в том числе ваши конфигурационные и текстовые файлы, которые вы упомянули как действительный код JavaScript, то есть упаковать a story1.txt в story1.js, например:

var myapp.story1 = "Complete text of story1.txt"

а затем просто динамически выбирайте нужные вам материалы из соответствующих варов или даже используйте DOM-манипуляцию, чтобы загружать только скрипты, которые вам нужны, динамически добавляя теги <script>. На мой взгляд, это лучший вариант, поскольку он менее навязчив: он не требует установки/реконфигурации, он просто работает из коробки.

Ответ 2

Вы должны поместить свои локальные файлы на один и тот же сервер. Если вы работаете на локальном сервере, вам необходимо установить некоторый веб-сервер в качестве Apache, чтобы получить доступ к вашему местоположению "remote".

Каждый современный браузер останавливает это, потому что вы не должны читать локальные файлы от ЛЮБОГО ПОЛЬЗОВАТЕЛЯ. Даже если вы работаете с localhost.

Ответ 3

Я обнаружил, что firefox будет запускать html и js локально.

Ответ 4

Если вам просто нужен быстрый и легкий "законный" веб-сервер, чтобы обмануть ваш браузер, подумав, что он не вытаскивает из локальной файловой системы, просто используйте простой сервер HTPP Python. Он просто обслуживает файлы по запросу из любой директории, из которой он был вызван. Сервер в противном случае немой. Он не будет выполнять PHP-скрипты или что-то еще. Вот как:

  • Установите Python 2.7 на свою машину разработки. Это единственное, что исправление будет постоянно установлено.
  • Откройте окно командной строки/терминала.
  • Перейдите в каталог, в котором находятся ваши сценарии.

cd/Пользователи/codemonkey/myCoolNewApp (например, на Mac)

  1. Выполните следующие действия:

    python -m SimpleHTTPServer 80

В поле Mac или Linux вам может потребоваться использовать sudo:

sudo python -m SimpleHTTPServer 80

  1. Откройте браузер и введите:

http://localhost/myapp.html (замените "myapp.html" на ваше имя script)

  1. И люди радуются.
  2. Чтобы остановить веб-сервер, вернитесь в окно терминала, в котором он запущен, и нажмите Ctrl-C. Или выключите компьютер. Этот сервер необходимо перезапустить с помощью шага 4 каждый раз, когда вы хотите его запустить.

Вы можете получить действительно фантазию и запустить несколько экземпляров на разных портах, но это выходит за рамки этого быстрого исправления.

Ответ 5

Вы можете загрузить локальный файл в браузере Chrome локально без использования AJAX. вы можете использовать обычно функцию jQuery, например $. getJSON() для загрузки файла в браузере Chrome.

Но если вы используете эту функцию jQuery, то Хром Web Security заблокирует вашу функцию для доступа к формам файлов файлов. В браузере Firefox он отлично работает, но если ваше требование является браузером Chrome, вам необходимо установить некоторые флагов Chromium с помощью командной строки.

Вот несколько шагов для установки Chromium Flags, которые позволяют вам добавить некоторые дополнительные функции, которые помогут вам получить доступ к файлу данных из вашей локальной системы. это: -

  • Выход или закрыть любой исполняемый экземпляр хром.
  • Найдите ярлык, который обычно используется для запуска хром.
  • Создайте копию.
  • Щелкните правой кнопкой мыши новый ярлык и выберите Свойства.
  • В самом конце текстового поля Target: добавьте пробел, а затем нужные флаги командной строки. Это должно быть примерно так: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
  • нажмите "применить" , а затем "ok" .
  • Дважды щелкните новый ярлык, чтобы запустить хром с новыми флагами командной строки.

Примечание. Помните, что ваши флаги теперь установлены только для этой хромированной иконки. поэтому запустите приложение с помощью этой хромированной иконки.

Ответ 6

То, что вы описываете (и предлагаемое решение) серьезно подрывает безопасность браузера.

должен работать локально, без необходимости сервера

Итак, как программное обеспечение попадает на машину? Если вы не собираетесь отправлять DVD-сообщения в сообщение, развертывание программного обеспечения может быть в качестве приложения HTML5 с использованием Манифестное кэширование (поддерживается во всех современных браузерах, включая Chrome, MSIE и Firefox). То, что это не обслуживает, - это хранение данных как обычных файлов, но вы можете хранить данные в локальном хранилище.

Ответ 7

В зависимости от ваших требований использование fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):

  fetch("./config.json").then(function(res) {
    // res instanceof Response == true.
    if (res.ok) {
      res.json().then(function(data) {            
        console.log(data);
      });
    } else {
      console.log("Looks like the response wasn't perfect, got status", res.status);
    }
  }, function(e) {
    console.log("Fetch failed!", e);
  });

Ответ 8

Я бы сделал расширение Chrome, если это позволяют ваши требования. Они просты в изготовлении и могут хорошо работать для вас. http://developer.chrome.com/extensions/index.html