Я помещаю интерактивный элемент SVG на страницу в приложении Electron, и поэтому мне нужен доступ к элементам во внешнем документе SVG с помощью Javascript. Все работает, как задумано, пока я не перезагрузить страницу. После перезагрузки я не могу получить доступ к внешнему DOM SVG из встроенного или внешнего скрипта, а также из консоли. Я что-то упустил или это ошибка?
Для проверки я создал неупакованное приложение Electron (версии 5.0.4 и 5.0.6) с нуля, основываясь на начале работы со страницей Electron. Затем я вставил три одинаковых простых SVG-файла: один с тегом object, один с тегом embed и один встроенный. Я написал некоторый код для отправки первого элемента на консоль после загрузки каждого SVG. При первоначальном запуске приложения все три элемента появляются на странице и в консоли, как и ожидалось.
Затем я перезагружаю приложение с помощью Ctrl + R (или Ctrl + Shift + R), и хотя все три элемента все еще появляются на странице, только элемент из встроенного SVG появляется в консоли. Два других дают ошибки о чтении свойства null. Использование contentDocument или getSVGDocument () через консоль для тегов 'object' или 'embed' соответственно возвращает null, тогда как они не перед перезагрузкой. То же самое верно при использовании Jquery вместо метода getElementById. Я даже не могу найти внешний документ через проводник элементов в консоли разработчика Chromium.
Вот код, который я только что описал:
<object id="object" data="bookmark.svg" type="image/svg+xml"></object>
<embed id="embed" src="bookmark.svg" type="image/svg+xml"></embed>
<svg id="inline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" width="96px" height="96px">
<g id="Sharp_3_">
<path d="M16,2v10l-3-2l-3,2V2H6C4.895,2,4,2.895,4,4v15c1,0,0.895-2,2-2h14V2H16z"/>
<path style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" d="M20,17H7c-1.105,0-2,0.895-2,2s0.895,2,2,2h13"/>
</g>
</svg>
<script>
document.getElementById("object").onload = function() {
console.log(document.getElementById("object").contentDocument.children[0].children[0]);
}
document.getElementById("embed").onload = function() {
console.log(document.getElementById("embed").getSVGDocument().children[0].children[0]);
}
console.log(document.getElementById("inline").children[0]);
</script>
Консоль возвращает перед перезагрузкой следующее:
index.html:23 <g id="Sharp_3_">...</g>
index.html:26 <g id="Sharp_3_">...</g>
index.html:28 <g id="Sharp_3_">...</g>
А после перезагрузки:
index.html:28 <g id="Sharp_3_">...</g>
index.html:23 Uncaught TypeError: Cannot read property 'children' of null at HTMLObjectElement.document.getElementById.onload (index.html:23)
index.html:26 Uncaught TypeError: Cannot read property 'children' of null at HTMLObjectElement.document.getElementById.onload (index.html:26)
Я ожидаю, что после перезагрузки это даст тот же результат - даже если он всегда работал или нет - и это заставляет меня думать, что это ошибка. Тем не менее, я новичок в Electron и вполне могу пропустить что-то о безопасности или структуре приложений, с которыми я еще не сталкивался. Я немного искал и еще не нашел что-то конкретно по этому вопросу. Я нашел кое-что о перезагрузке, вызывающей пустую страницу, или о кешировании, вызывающем проблемы с SVG, но я не знаю, как применить это к этой проблеме.
Я просто не мог бы перезагрузить компьютер и найти способ не дать пользователям перезагрузить компьютер, но это значительно замедлило бы мою скорость итерации. Я мог бы написать скрипт в SVG, но у меня есть несколько SVG, которые должны отвечать на один и тот же код одновременно. Будут признательны любые другие обходные пути или решения, но это может быть просто ошибкой, я не уверен.