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

Question

在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检查器中的对象元素

Answer 1

恐怕这并不是您想要的那样容易。

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

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

未捕获的SecurityError：无法从“ HTMLObjectElement”读取“ contentDocument”属性

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

首先，如果这是一个仅供您自己使用的程序，则可以在禁用网络安全性的情况下启动浏览器（尽管这通常对于浏览网络是危险的）。 例如，在Chrome中，您可以通过使用--disable-web-security标志启动Chrome来执行此操作。 此处有更多详细信息。

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

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

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

cd /home/your_user_name/your_directory
python -m SimpleHTTPServer

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

如果您使用的是Windows，但尚未安装Python，则也可以使用内置的IIS服务器或WAMP （或仅安装Python ）。

Answer 2

y.innerHTML = 'Hello World';

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

您想在'x'元素的确切位置插入文本吗？ 例如'x'-> html-> body？

Answer 3

object元素正在异步加载文本文件，因此，如果您尝试通过查询该元素来获取文本数据，则会得到undefined 。

但是，可以在<object>元素中使用onload属性。

在HTML中，添加一个onload，该onload在脚本中调用函数以捕获文本文件已完全加载的时间。

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

在脚本中，您可以使用contentDocument获取对象的data 。

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 个解决方案

解决方案1
1 2015-08-20 12:41:08

解决方案2
0 2015-08-20 13:07:06

解决方案3
0 2015-08-20 13:25:25

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

问题描述

3 个解决方案

解决方案1 1 2015-08-20 12:41:08

解决方案2 0 2015-08-20 13:07:06

解决方案3 0 2015-08-20 13:25:25

解决方案1
1 2015-08-20 12:41:08

解决方案2
0 2015-08-20 13:07:06

解决方案3
0 2015-08-20 13:25:25