Question

在ID为x的object元素中，正确加载并显示文本文件。如何使用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

Answer 1

我担心这不会像你想的那样容易。

根据您的评论，您首先尝试了AJAX，但遇到了CORS问题。当您尝试在不同的域名上包含文件中的数据时会发生这种情况。

由于这不起作用，您尝试将文件包含在object标记内。这有点像iframe - 数据将显示在网页上，但出于与上述相同的原因，如果文件不同，则无法通过JavaScript访问数据域名。这是一项安全功能。这解释了您最近收到的错误：

Uncaught SecurityError：无法从'HTMLObjectElement'中读取'contentDocument'属性

现在，有几种方法可以解决这个问题。

首先，如果这是一个专门供您自己使用的程序，您可以在禁用Web安全的情况下启动浏览器（尽管这对于浏览网页通常很危险）。例如，在Chrome中，您可以通过启动带有--disable-web-security标记的Chrome来执行此操作。 More details here.

其次，您可以尝试安排您的文档和文件属于同一个域。如果您控制了文件，您可能只能这样做。

您的错误消息（特别是a frame with origin "null"）让我认为您是直接在Web浏览器中而不是通过服务器运行文件。如果您通过实际的服务器，它可能会使事情更好。

如果您已经安装了Python（它包含在Linux和Mac中），最简单的方法是打开终端并浏览到您的代码目录。然后启动一个简单的Python服务器：

cd /home/your_user_name/your_directory
python -m SimpleHTTPServer

这将启动一个Web服务器，您可以通过导航到http://localhost:8000/your_file.html在浏览器中访问该服务器。

如果您使用的是Windows并且未安装Python，则还可以使用内置的IIS server或WAMP（或只安装Python）。

Answer 2

y.innerHTML = 'Hello World';

将取代＆＃39; x＆＃39;中的所有内容。带有文字＆＃39; Hello World＆＃39;的元素，但看起来您已经将另一个HTML文档加载到＆＃39; x＆＃39;元件。所以问题是......

＆＃39; x＆＃39;你想插入文字吗？例如＆＃39; x＆＃39; - ＆GT; html - ＆gt;体？

Answer 3

object元素异步加载文本文件，因此如果您尝试通过查询元素来获取其数据，那么您将获得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!
}

如何在对象元素中获取文本？

3 个答案: