0

在具有 ID 的对象元素中，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>

HTML 检查器中的对象元素

4

3 回答 3

1

恐怕这不会像你希望的那样容易。

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

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

未捕获的安全错误：无法从“HTMLObjectElement”读取“contentDocument”属性

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

首先，如果这是一个专供您自己使用的程序，您可以在禁用网络安全的情况下启动您的浏览器（尽管这对于浏览网页一般来说是危险的）。例如，在 Chrome 中，您可以通过启动带有--disable-web-security标志的 Chrome 来做到这一点。更多细节在这里。

其次，您可以尝试安排您的文档和文件属于同一个域。如果您可以控制文件，您可能只能执行此操作。

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

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

cd /home/your_user_name/your_directory
python -m SimpleHTTPServer

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

如果您在 Windows 上并且没有安装 Python，您也可以使用内置的IIS 服务器或WAMP（或只安装Python）。

于 2015-08-20T12:41:08.253 回答
0 
y.innerHTML = 'Hello World';

将用文本“Hello World”替换“x”元素中的所有内容，但看起来您已经将另一个 HTML 文档加载到“x”元素中。所以问题是...

您想在“x”元素的哪个位置插入文本？例如'x'-> html-> 正文？

于 2015-08-20T13:07:06.827 回答
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!
}
于 2015-08-20T13:25:25.287 回答