Почему я не могу получить доступ с помощью contentDocument к файлу SVG в Chrome, а в Firefox?

Question

Я обращаюсь к своему SVG-файлу с помощью Javascript, чтобы изменить заполнение определенного идентификатора, он работает в Firefox, но не в Chrome. Это ошибка появляется в Chrome:

Uncaught DOMException: не удалось прочитать свойство 'contentDocument' из 'HTMLObjectElement': заблокирован фрейм с источником "null" от доступа к фрейму перекрестного происхождения.

        <script>
          function mapping(elem){
            var map = document.getElementById("Map");
            var mapDoc = map.contentDocument;
            mapDoc.getElementById(elem).style.fill = 'red';
          }
        </script>
        <object id="Map" data="images/Map.svg" type="image/svg+xml"></object>
        <button onclick="mapping('Gus');">Click</button>

Answer 1

Если вы обращаетесь к файлам напрямую (как вы подтверждаете в своем комментарии ), модель безопасности Chrome требует, чтобы все файлы были в одном каталоге.

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

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

Answer 2

Я не могу воспроизвести поведение, которое вы наблюдаете. Я предполагаю, что содержимое тега объекта заблокировано chrome из-за той же политики происхождения . Так что просто тестирование без localhost не будет работать.