Object contentdocument не работает

Почему мой объект contentDocument возвращает ноль?

Моя цель — прокрутить колесо мыши, чтобы изменить атрибут viewBox в SVG, который получен через websocket с сервера API. Я делаю это следующим образом:

когда получить данные svgStr из веб-сокета, динамически положить это в элемент.

let obj = document.getElementById(‘std-chart’); var objUrl = ‘data:image/svg+xml;utf8,’+ svgStr; obj.setAttributeNS(null,’data’,objUrl);

где svgStr это что-то вроде:

Q1. Я не совсем уверен, почему мне нужно добавить data:image/svg+xml;utf8, напротив svgStr , Если я не, изображение не может быть показано.

в моей функции mouseWheelScroll() я пытаюсь найти этот элемент svg и изменить его viewBox. Однако я не могу найти элемент SVG, потому что contentDocument возвращает ноль.

var svgObjs = document.getElementsByClassName(«mouse-wheel-pannable»); var svgObj = svgObjs[0].contentDocument; //svgObj returns null var svg = svgObj.getElementsByTagName(‘svg’)[0]; //error here svg.setAttributeNS(null, ‘viewBox’, someNewViewBox);

Вопрос. Как я могу получить действительный контент-документ. т.е. элемент, так что я могу изменить viewBox?

Я пытался использовать вместо Из консоли Chrome я увидел элемент для вставки, но все же, как получить нижнюю часть ? В том, что показано на следующем рисунке все еще в силе? Пожалуйста, нажмите здесь, чтобы увидеть Chrome консоли для него.

Сделал еще несколько тестов. Если я установлю в первом начале, т.е. если я храню содержимое SVG в файле и загружается при инициализации все работает отлично. Тогда я думаю, что вопрос в том, как динамически «перезагрузить» содержимое SVG.

Источник

почему мой объект contentDocument возвращает null?

Моя цель — прокрутить колесико мыши, чтобы изменить атрибут viewBox в SVG, который извлекается через websocket с сервера API. То, как я это делаю, следующее:

когда получить данные svgStr из websocket, динамически поместить это в элемент .

let obj = document.getElementById(‘std-chart’); var objUrl = ‘data:image/svg+xml;utf8,’+ svgStr; obj.setAttributeNS(null,’data’,objUrl);

где svgStr — это что-то вроде:

Q1. Я не совсем уверен, зачем мне добавлять data:image/svg+xml;utf8, перед svgStr . Если этого не произойдет, изображение невозможно отобразить.

в моей функции mouseWheelScroll() я пытаюсь найти этот элемент svg и изменить его viewBox. Однако я не могу найти элемент svg, потому что contentDocument возвращает null.

var svgObjs = document.getElementsByClassName(«mouse-wheel-pannable»); var svgObj = svgObjs[0].contentDocument;//svgObj returns null var svg = svgObj.getElementsByTagName(‘svg’)[0];//error here svg.setAttributeNS(null, ‘viewBox’, someNewViewBox);

Вопрос. Как я могу получить действительный contentDocument. т.е. , так что я могу изменить viewBox?

Я попытался использовать вместо , из консоли Chrome я увидел элемент embed, однако все же, как получить под ? Является ли это тем, что показанное на следующем рисунке, все еще действует? Нажмите здесь, чтобы просмотреть консоль хром.

Проделали еще несколько тестов. Если я устанавливаю в первом начале, т. Если я храню содержимое svg в файле и загружаюсь при инициализации , все работает отлично. Тогда я думаю, что вопрос заключается в том, как динамически позволить «перезагружать» содержимое svg.

Источник

Why does contentDocument returns null?

I’d like to fill an svg file inside inside an

Javascript

Why is contentDocument returning null ? How can I fill the svg icon to another color ?

1 Answer 1

There are two potential issues here:

1. The object data (your SVG) takes time to load
2. The object isn’t loaded until it’s visible

In short, you need to add an onload handler to the holding the SVG, or use onEventListener(‘load’. ) to capture the .contentDocument once the element is loaded.

For resources loaded locally there are also potential problems with caching. A good usage example is here: Load event not fired on Safari when reloading page

Not the answer you’re looking for? Browse other questions tagged javascript svg or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

почему мой объект contentDocument возвращает ноль?

Моя цель — прокрутить колесико мыши, чтобы изменить атрибут viewBox в SVG, который извлекается через websocket с сервера API. То, как я это делаю, следующее:

когда получить данные svgStr из websocket, динамически поместить это в элемент .

let obj = document.getElementById(‘std-chart’); var objUrl = ‘data:image/svg+xml;utf8,’+ svgStr; obj.setAttributeNS(null,’data’,objUrl);

где svgStr — это что-то вроде:

Q1. Я не совсем уверен, зачем мне добавлять data:image/svg+xml;utf8, перед svgStr . Если этого не произойдет, изображение невозможно отобразить.

в моей функции mouseWheelScroll() я пытаюсь найти этот элемент svg и изменить его viewBox. Однако я не могу найти элемент svg, потому что contentDocument возвращает null.

var svgObjs = document.getElementsByClassName(«mouse-wheel-pannable»); var svgObj = svgObjs[0].contentDocument;//svgObj returns null var svg = svgObj.getElementsByTagName(‘svg’)[0];//error here svg.setAttributeNS(null, ‘viewBox’, someNewViewBox);

Вопрос. Как я могу получить действительный contentDocument. т.е. , так что я могу изменить viewBox?

Я попытался использовать вместо , из консоли Chrome я увидел элемент embed, однако все же, как получить под ? Является ли это тем, что показанное на следующем рисунке, все еще действует? Нажмите здесь, чтобы просмотреть консоль хром.

Проделали еще несколько тестов. Если я устанавливаю в первом начале, т. Если я храню содержимое svg в файле и загружаюсь при инициализации , все работает отлично. Тогда я думаю, что вопрос заключается в том, как динамически позволить «перезагружать» содержимое svg.

Источник

iframe contentDocument and contentWindow is null

I am trying to access iframe’s contentDocument and contentWindow in following code. But they both are null.

Can someone tell me whats wrong in this? Thanks

When i do Document.Body.AppendChild(iframe), then contentDocument and contentWindow are non null.

Can someone tell me whats wrong when i append the iframe to div?

1 Answer 1

I know that this is a bit late, but i was researching this and stumbled on your question:

I got the same error as you, because the div i was trying to append the iframe to wasn’t loaded yet when i was trying to append the iframe. If the div is loaded your code works:

Here is a jsFiddle with this working code and another with the tag in the giving an error TypeError: Cannot call method ‘appendChild’ of null .

Not the answer you’re looking for? Browse other questions tagged javascript iframe or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник