在 html 中嵌入文本文件答案

【问题标题】：Embed text files in html在 html 中嵌入文本文件
【发布时间】：2013-10-19 21:32:23
【问题描述】：

我想在存储在服务器上的 HTML 页面（.rtf、.txt、.log、...）中显示文本文件的内容。

我尝试过使用embed，但似乎不起作用。

<embed src="/path_to_text_file/text.rtf" width="500" height="300">

有一个“简单”的方法（或标签）可以做到这一点，或者我应该扫描内容并使用例如 jQuery 打印它？

【问题讨论】：

@Dvir with object 它会自动开始下载而不显示文件内容
你的意思是嵌入还是包含？ RTF还是纯文本？不同的东西。
@JukkaK.Korpela 显示文件的内容。各种“简单”的文本格式（.rtf、.txt、.log、...）
那这个问题太笼统了。
@CraigHicks 如果我没记错的话 5 年前我做了什么 ;-) 使用嵌入标签它开始下载文件而不是显示内容

标签： html text embed text-files

【解决方案1】：

仅适用于插件内容（flash 等）。尝试使用ajax获取内容，然后用document.write写；或者在后端语言（PHP、ASP 等）中使用include 标签

【讨论】：

+1 给我正确的工作方向，Keith V 赢得最佳答案，因为他给我的解决方案比你的更完整

【解决方案2】：

应该这样做：

<object data="/path_to_text_file/text.txt" type="text/plain"
width="500" style="height: 300px">
<a href="/path_to_text_file/text.txt">No Support?</a>
</object>

【讨论】：

不幸的是Chrome无法正常工作，似乎自动开始下载而不显示内容
发布的代码运行良好。 RTF 文件的类似代码可能不会。
@JukkaK.Korpela 使用 .rtf 文件进行测试
这适用于 Chrome 63。但是，您必须等待文档加载。例如，在window.onload 事件中执行data.contentDocument.body.textContent.trim()，其中data 是对object 元素的引用。此外，您可能希望 object 元素的宽度和高度为零（但不是 style="display:none" — 这会破坏它）。
对我不起作用。我认为现代浏览器有更严格的安全性并阻止了这一点。我所做的是将数据存储在 javascript 文件中并将其加载到

【解决方案3】：

在内部使用带有 .append() 函数的 $.ajax() 函数，您可以轻松获取文本文档的内容并将它们显示在页面上。类似于您在下面看到的内容。在页面加载时执行此操作，以立即将文件与页面的其余部分一起加载。

$.ajax({
        async:false,
        url: 'folder/file.txt',
        dataType: 'text',
        success: function(data) 
        {
        $('element').append(data);
            }
        });

稍微尝试一下以获得您正在寻找的正确结果。你也可以使用 PHP，但除非你真的需要解析数据，否则 PHP 在这种情况下有点矫枉过正。

【讨论】：

这是包含，而不是嵌入。也许是真正想要的，而不是被要求的。
对不起，damoiser，但很高兴它对你有用。你也可以使用 $.get() 请求，我只是想我会给你原始的 ajax 请求，它有更多可以控制的选项。

【解决方案4】：

只需使用 php。将html格式改成php并使用

echo file_get_contents("name_of_the_file.txt");

就这么简单。您必须使用 php，因为您必须在服务器端输出文本，除非信息不会显示给客户端。

我认为这是做你想做的最简单的方法。

【讨论】：

我不认为我必须使用像 PHP、ASP、AngularJS 之类的服务器端语言编程......当然这更容易，但我的问题是如何仅在客户端实现这一点。查看接受的解决方案

【解决方案5】：

我发现将 HTML5 代码插入网站的最佳方法是将代码保存到新的文本文档中，然后使用 .然后就可以使用css和div来格式化代码了。

【讨论】：

使用 what? 嵌入该文档？

【解决方案6】：

注意：对于与 Keith V 的回答的相似性以及他提到的获取请求这一事实深表歉意 - 我只是在发布我的答案后才注意到他对获取请求的评论。

我发现以下结构很有帮助，并且允许我将文本样式设置为跨度，而不必使用对象：

function append_url_content_to_div(url){
  $.get(url, function(returned_data){
    console.dir(returned_data);
    var content = '<span>'+returned_data+'</span>';
    $("#appendee_div").append(content);								
  });
}
append_url_content_to_div("https://dl.dropbox.com/s/euk874r7zd1cx0d/example_text.txt?dl=0"); //note that it has to be "dl." not "www." in dropbox

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appendee_div"></div>

它适用于 Dropbox 内容，但我不明白为什么它不适用于可公开查看的文本文件。正如你在代码中看到的，你需要jquery。

【讨论】：

【解决方案7】：

iFrame 在这种情况下可能很有用。

&lt;iframe src="/path_to_text_file/text.rtf" width="500" height="300" frameBorder="0"&gt;

【讨论】：

我赞成这个解决方案，因为它比对象 html 元素更灵活且更常用。它也可以用作叠加层并具有滚动条，什么是题外话......