Как отменить привязку события onload к внешнему SVG после его первоначального завершения? - PullRequest
Новая
       43

Как отменить привязку события onload к внешнему SVG после его первоначального завершения?

0 голосов
/ 29 мая 2019

У меня довольно сложный и особый вопрос. У меня есть контейнер div, который изначально скрыт (display: none) и который отображается, когда пользователь нажимает кнопку (используя функцию jQuery show()). В этом div есть визуализация SVG.

HTML 

<div id="parent">
    <object id='myObject' type="image/svg+xml"></object>
</div>

Javascript

В SVG загружается следующий код: 

fetch('LINK TO THE SVG FILE')
    .then(function(r) {return r.blob()})
    .then(function(b) { return myObject.data = URL.createObjectURL(b)})


myObject.onload = function() { // wait for the svg has loaded

    var myObject = this; // we're in the object's load event handler.
    var svg = d3.select(myObject.contentDocument) // get the contentDocument
        .select("svg"); // then get the svg inside
    //...some more styling things happen here
}

Моя проблема в том, что я не знаю, как (иначе , где ) мне следует отменить привязку к событию onload, потому что оно срабатывает каждый раз, когда пользователь нажимает кнопку, чтобы изменить режим display родитель div. Когда я использую следующий код ... 

fetch('LINK TO THE SVG FILE')
    .then(function(r) {return r.blob()})
    .then(function(b) { return myObject.data = URL.createObjectURL(b)})
    .then(function() {return myObject.onload = null})

... он никогда не применяет настройки стиля, которые я выполняю в функции onload. Также, когда я добавляю настройку myObject.onload = null в конец события нажатия моей кнопки, она не запускает функцию onload.

Что мне здесь не хватает?

1 Ответ

0 голосов
/ 29 мая 2019

Вы пробовали что-то подобное? 

fetch('LINK TO THE SVG FILE')
  .then(function(r) {return r.blob()})
  .then(function(b) {
     myObject.onload = function() { // wait for the svg has loaded
       // ...do what you need to...
       myObject.unload = null;
     }
     myObject.data = URL.createObjectURL(b)
  });
...