Не удается прочитать свойство 'body', равное null, в Chrome, но работающее в Firefox

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь получить данные из <object> тега, используя JavaScript. Но при чтении я получаю приведенную ниже ошибку в Chrome:

Не удается прочитать свойство ‘body’, равное null

Но тот же код отлично работает в Firefox. Ниже приведен мой код:

 <body onload="init()">
    <object id="data" data="graph.json" type="text/plain" style="display:none"></object>
</body>
<script>
var init = function(){
    var json = document.getElementById("data").contentDocument.body.childNodes[0].innerHTML;
    var graph = JSON.parse(json);
}
</script>

Поэтому document.getElementById("data").contentDocument.body.childNodes[0].innerHTML выдает ошибку.

1. первый шаг — выполнить console.log(document.getElementById("data")) , а затем проверить, в чем разница в обоих браузерах.

2. Итак, разница в том, что в Chrome я просто получаю пустой тег object, а в Chrome я получаю этот тег с данными.

Ответ №1:

Вы можете просто использовать innerHTML :

 document.getElementById("data").innerHTML

<object /> Элемент будет содержать HTML-код, когда вы определяете источник — браузер отобразит HTML в нем. Таким образом, innerHTML просто будет работать, и вам не нужно беспокоиться о contentDocument и / или contentWindow. Это было необходимо, если вы использовали iframe .

Ответ №2:

Вместо .contentDocument вы могли бы использовать .contentWindow.document , которое, похоже, работает в Chrome.

Кроме того, я бы не использовал .childNodes[0].innerHTML , но .textContent , потому что HTML может включать HTML-объекты (например, amp;> когда ваш JSON имеет < где-то), в то время как textContent будет просто выдавать обычный текст.

Итак:

 document.getElementById("data").contentWindow.document.body.textContent