Элемент Object #document не найден, даже если я жду загрузки SVG - PullRequest
Новая
       3

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

1 голос
/ 13 марта 2019

У меня есть SVG, и я пытаюсь создать clickList EventListener, который прокручивает вниз и изменяет данные SVG (например, анимацию).Проблема в том, что .contentDocument из SVG возвращает ноль, и я не могу привязать его к щелчку.Я не понимаю почему, потому что я жду загрузки 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: Невозможно прочитать свойство addEventListener из неопределенного в HTMLObjectElement. <anonymous>

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

1 Ответ

0 голосов
/ 13 марта 2019

Вы случайно не тестируете локально с 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.log("svg = ",svg);
  });

    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...