Элемент Object #document не найден, даже если я жду загрузки SVG

У меня есть SVG, и я пытаюсь сделать click eventListener, который прокручивается вниз и изменяет данные SVG (например, анимацию). Проблема в том, что .contentDocument SVG возвращает null, и я не могу привязать его к клику. Я действительно не понимаю, почему, потому что я жду загрузки SVG, поэтому, по моему мнению, он должен работать. Вот код:

document.addEventListener("DOMContentLoaded", function(event) {
    var video = document.querySelector("video");
    var mySVG = document.querySelector("object");
    var svgDoc;
    mySVG.addEventListener("load",function() {
      svgDoc = mySVG.contentDocument;
      svgDoc.addEventListener("click", function() {
        mySVG.setAttribute("data", "svg/Robot 2.svg");
        video.scrollIntoView({behavior: "smooth"});
    });
    }, false);
});

<!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">
    <link href = "css/reset.css" type = "text/css" rel = "stylesheet">
    <link href = "css/css.css" type = "text/css" rel = "stylesheet">
    <link href = "css/bootstrap.min.css" type = "text/css" rel = "stylesheet">
    <title>Made4Europe</title>
</head>
<body>
    <div id = "container-site">
        <section class = "nav-index">
            <nav class = "navbar navbar-expand-md navbar-light bg-light">
                <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarTogglerDemo01" aria-controls = "navbarTogglerDemo01" aria-expanded = "false" aria-label = "Toggle navigation">
                  <span class = "navbar-toggler-icon"></span>
                </button>
                <div class = "collapse navbar-collapse" id = "navbarTogglerDemo01">
                  <a class = "navbar-brand" href = "#"><img src = "img/logo.png" class = "logo-carabella"></a>
                  <ul class = "navbar-nav navbar-custom mr-auto mt-2 mt-lg-0">
                    <li class = "nav-item active">
                      <a class = "nav-link custom-color" href = "#">Acasa<span class = "sr-only">(current)</span></a>
                    </li>
                    <li class = "nav-item">
                      <a class = "nav-link custom-color" href = "#">Lectii</a>
                    </li>
                    <li class = "nav-item">
                      <a class = "nav-link custom-color" href = "#">Teste</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link custom-color" href = "#">Detalii</a>
                    </li>
                  </ul>
                    <ul class = "navbar-nav ml-auto">
                        <li class = "nav-item">
                            <a class = "nav-link" href = "#"><img src = "img/logo-erasmus.png" class = "logo-erasmus"></a>
                        </div>
                  </ul>
                </div>
              </nav>
        </section>
        <section class = "welcome-index">
            <div class = "jumbotron jumbotron-fluid jumbotron-custom text-center">
                <div class = "container">
                  <div class = "container-text-robot">
                    <img src = "img/text.png" class = "text-robot-1"/>
                    <img src = "img/text 2.png" class = "text-robot-2"/>
                  <object data = "svg/Robot 1.svg" type = "image/svg+xml" class = "index-modificat"></object>
                </div>
                </div>
            </div>
        </section>
        <section class = "video-prezentare">
          <video src = "test.mp4" width = "1024" height = "768" controls></video>
          <div id = "wrapper-video-circuit">
            <img src = "img/video.png" class = "circuit-video">
          </div>
          <div id = "video-changer">
            <img src = "img/hard-drive.png" class = "hard-drive">
            <img src = "img/cd.png" class = "cd-video">
            <img src = "img/slider-hard.png" class = "slider-hard">
          </div>
        </section>
    </div>
    <script src = "js/jquery.min.js"></script>
    <script src = "js/bootstrap.min.js"></script>
    <script src = "js/main.js"></script>
</body>
</html>

Ошибка:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined at HTMLObjectElement.<anonymous>

Может ли кто-нибудь помочь мне исправить это? Спасибо.

Действительно ли SVG загружается в <object>? Он отображается?

— 13.03.2019 12:15

Да, это так. Вот почему мне это странно.

— 13.03.2019 12:18

javascript html css svg

13.03.2019 10:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

291

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы случайно не тестируете локально с file:// URL-адресами в Chrome? Если это так, попробуйте вместо этого Firefox. Chrome рассматривает URL-адреса file:// как другой домен и не позволяет вам получить доступ к их содержимому через свойство contentDocument.

Следующий пример отлично работает для меня в Firefox. Я переименовал некоторые из ваших переменных для ясности.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG + Object test</title>
    <meta charset = "UTF-8" />
  </head>

  <body>
    <object
      data = "kiwi.svg"
      type = "image/svg+xml"
      class = "index-modificat"
    ></object>

    <script>

  var objectElem = document.querySelector("object");
  objectElem.addEventListener("load", function () {
    contentDoc = objectElem.contentDocument;
    svg = contentDoc.documentElement;
    console.info("svg = ",svg);
  });

    </script>
  </body>
</html>

Отличный ответ. Ты был прав. Как я могу это исправить, чтобы он работал в хроме локально? Я должен представить этот сайт на небольшой конкурс, и у меня не будет веб-сервера. Он будет запускаться локально. Так что, пожалуйста, помогите мне :)

— 13.03.2019 14:27

Я не уверен, что ты можешь. Вы можете попробовать предложения в этом вопросе. Вероятно, проще продемонстрировать в Firefox, если это вообще возможно. В противном случае очень легко запустить локальный веб-сервер. Большинство IDE могут это сделать.

— 13.03.2019 15:49

Большое спасибо за ваше время. Я представлю его на ПК с VS и буду использовать IIS Express.

— 13.03.2019 18:57

13.03.2019 13:21