Можно ли пройти через собственный код в отладчике Edge (или любого браузера)?

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

var img = new Image();
img.onload = function() {
  console.info("succ");
}
img.onerror = function(error) {
  console.info(error);
}
img.src = 'data:image/svg+xml;utf8,<svg viewBox = "0 0 200 200" xmlns = "http://www.w3.org/2000/svg"><style>polygon { fill: black } div {color: white;font:18px serif;height: 100%;overflow: auto;}</style><polygon points = "5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x = "20" y = "20" width = "160" height = "160"><!--In the context of SVG embeded into HTML, the XHTML namespace couldbe avoided, but it is mandatory in the context of an SVG document--><div xmlns = "http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed mollis mollis mi ut ultricies. Nullam magna ipsum,porta vel dui convallis, rutrum imperdiet eros. Aliquamerat volutpat.</div></foreignObject></svg>'
document.getElementById("target").append(img);
<div id = "target"></div>

Когда я вхожу в код, явно возникает ошибка, связанная с тем, как создается экземпляр Image с его свойством src. Но я не могу войти в код браузера, чтобы понять, почему он не работает. Можно ли это как-то сделать?

🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.


36
1

Ответ:

Решено

После тестирования вашего кода на моей стороне кажется, что проблема связана со свойством высоты в стиле.

Попробуйте удалить свойство высоты из этой части кода.

div {color: white;font:18px serif; height: 100%;overflow: auto;}

Затем код, как показано ниже:

<div id = "target"></div>

<script type = "text/javascript">
    var img = new Image();
    img.onload = function () {
        console.info("succ");
    }
    img.onerror = function (error) {
        console.info(error);
    }
    img.src = 'data:image/svg+xml;utf8,<svg viewBox = "0 0 200 200" xmlns = "http://www.w3.org/2000/svg"><style>polygon { fill: black } div {color: white;font:18px serif;overflow: auto;}</style><polygon points = "5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x = "20" y = "20" width = "160" height = "160"><!--In the context of SVG embeded into HTML, the XHTML namespace couldbe avoided, but it is mandatory in the context of an SVG document--><div xmlns = "http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed mollis mollis mi ut ultricies. Nullam magna ipsum,porta vel dui convallis, rutrum imperdiet eros. Aliquamerat volutpat.</div></foreignObject></svg>'
    img.style = "height :100%";
    document.getElementById("target").append(img);
</script>

Результат нравится.