2015-08-20 4 views
0

В элементе объекта с идентификатором x текстовый файл загружается и отображается правильно. Как я могу получить этот текст с помощью JavaScript?Как получить текст внутри элемента объекта?

Я установил

y.data = "prova.txt" 

затем попытался

y.innerHTML; 
y.text; 
y.value; 

Ни одна из этих работ.

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    <object id="x" data="foo.txt"></object> 
    <script> 
     var y = document.getElementById("x") 
    </script> 
    </body> 
</html> 

Object element in HTML inspector

+1

Почему вы ожидали работы 'y.value' и' y.text'? Кроме того, вы _only_ пытаетесь получить текст или действительно хотите отобразить текст на странице с помощью элемента объекта? Есть лучшие способы сделать то же самое - с тем же решением: AJAX. Если это так, это проблема [XY] (http://meta.stackexchange.com/questions/66377). – Xufox

+0

Я начинаю, поэтому я пробовал эти способы. Объект загружает правильно текст файла и отображается в браузере (iframe?), Но все мои попытки идут не так –

+0

Можете ли вы показать примерный пример? wiht XHR мне нужно включить плагины Chrome ... или изменить настройки сервера Apache для загрузки файла; но я видел таким образом Chrome load CORS plugins –

ответ

0

Я боюсь, что это не будет легко, как вы хотели бы, чтобы это было.

Согласно вашим комментариям, вы сначала попробовали AJAX, но столкнулись с проблемами CORS. Это происходит, когда вы пытаетесь включить данные из файлов в другое доменное имя .

Поскольку это не сработало, вы попытались включить файл в тег object. Это немного похоже на iframe - данные будут отображаться на веб-странице, но по тем же причинам, что и выше, вы, , не можете получить доступ к данным через JavaScript, если файл находится под другим доменным именем. Это функция безопасности. Это объясняет ошибку вы получали в последнее время:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement'


Теперь, Есть несколько способов, вы могли бы быть в состоянии обойти эту проблему.

Во-первых,, если это программа исключительно для вашего собственного использования, вы можете запустить свой браузер с отключенной веб-защитой (хотя это опасно для просмотра в Интернете в целом). Например, в Chrome вы можете сделать это, запустив Chrome с флагом --disable-web-security. More details here.

Во-вторых,, можно попытаться договориться, что ваш документ и файл принадлежат к одному домену. Вероятно, вы сможете это сделать только в том случае, если у вас есть контроль над файлом.

Ваше сообщение об ошибке (в частности, a frame with origin "null") заставляет меня думать, что вы запускаете файлы непосредственно в веб-браузере, а не через сервер. Это может заставить работу работать лучше, если вы пройдете через настоящий сервер.

Если у вас установлен Python (он включен в Linux и Mac), самый простой способ - открыть терминал и перейти к каталогу вашего кода. Затем запустите простой сервер Python:

cd /home/your_user_name/your_directory 
python -m SimpleHTTPServer 

Это запустит веб-сервер, который вы можете получить доступ в Вашем браузере, перейдя http://localhost:8000/your_file.html.

Если вы находитесь в Windows и не используете Python, вы также можете использовать встроенный IIS server или WAMP (или просто установите Python).

0
y.innerHTML = 'Hello World'; 

заменит все в элементе «х» с текстом «Hello World», но это выглядит, как вы уже загружен другой HTML-документ в элемент «х». Итак, вопрос в том, что ...

Где именно в элементе «x» вы хотите вставить текст? например, 'x' -> html -> body?

+0

браузер загружает текстовый файл автоматически и вставляет текст в объект, просто я не знаю, как извлекать информацию –

0

Элемент объекта загружает текстовый файл асинхронно, поэтому, если вы попытаетесь получить его данные, запросив элемент, вы получите undefined.

Однако, вы можете использовать атрибут onload в <object> элементов.

В вашем HTML добавьте onload, который вызывает функцию в вашем скрипте, чтобы поймать, когда текстовый файл полностью загружен.

<object id="x" onload="getData()" data="readme.txt"></object>

В сценарии, вы можете получить объект, data с contentDocument.

function getData() { 
    var textFile = document.getElementById('x').contentDocument; 
    /* The <object> element renders a whole 
     HTML structure in which the data is loaded. 
     The plain text representation in the DOM is surrounded by <pre> 
     so we need to target <pre> in the <object>'s DOM tree */ 

    // getElementByTagsName returns an array of matches. 
    var textObject = textFile.getElementsByTagName('pre')[0]; 
    // I'm sure there are far better ways to select the containing element!. 

    /*We retrieve the inner HTML from the object*/ 
    var text = textObject.innerHTML; 

    alert(text); //use the content! 
} 
Смежные вопросы