Question

我有一个SVG，我正在尝试制作一个单击事件侦听器，该事件向下滚动并更改SVG的数据（如动画）。问题是SVG的.contentDocument返回null，我无法将其绑定到click。我真的不明白为什么，因为我正在等待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>

错误：

未捕获的TypeError：无法读取的属性'addEventListener' 在HTMLObjectElement上未定义。<anonymous>

有人可以帮我解决这个问题吗？谢谢。

Answer 1

您是否有机会通过Chrome上的file:// URL在本地进行测试？如果是这样，请尝试使用Firefox。 Chrome将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>

即使我等待SVG加载，也找不到对象#document元素

1 个答案: