1

I have a SVG and I'm trying to make a click eventListener which scrolls down and changes the SVG's data (like an animation). The problem is that .contentDocument of the SVG returns null and I can't bind it to click. I don't really get why because I'm waiting for the SVG to load, so in my opinion it should be working. Here's the code:

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>

Error:

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

Can anyone help me fix this? Thanks.

Cezar Stoica
  • 15
  • 3

1 Answers1

0

Are you, by any chance, testing locally with file:// URLs on Chrome? If so, try Firefox instead. Chrome treats file:// URLs as a different domain, and won't let you access their contents via the contentDocument property.

The following example works fine for me in Firefox. I've renamed some of your variables for clarity.

<!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>
Paul LeBeau
  • 81,507
  • 8
  • 120
  • 146
  • Great answer. You were right. How can I fix it so it will work in chrome locally? I have to present this website for a small contest and I won't have a web server. It will be ran locally. So please help me :) – Cezar Stoica Mar 13 '19 at 13:27
  • I'm not sure you can. You could try the [suggestions in this question](https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome). Probably simpler to demo in Firefox if at all possible. Otherwise, it's very easy to run a local webserver. Most IDEs can do that. – Paul LeBeau Mar 13 '19 at 14:49
  • Thanks a lot for your time. I will present it on a PC running VS and I will use IIS Express – Cezar Stoica Mar 13 '19 at 17:57