Question

是否可以类似地调用文本文件来引用图像标记中的图像？与

类似

<img src="http://link.to/image.png">

但

<p src="http://link.to/text.txt"></p>

你能用javascript做到这一点吗？任何建议都会受到超级赞赏！

Answer 1

您可以使用XHR（XMLHttpRequest）执行此操作。纯Javascript：

<p id="text"></p>

<script>
text = document.getElementById('text');

xhr = new XMLHttpRequest();
xhr.open("GET", "http://link.to/file.txt");
xhr.send();

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4)               //the readyState if the status of the request 
        text.innerHTML = xhr.responseText; // (http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp)
                                           // 4 is a completed request
}
</script>

或者，jQuery具有.load()函数：

<p id="text"></p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$('#text').load('http://link.to/file.txt');
</script>

Answer 2

只要远程服务器向您发送了正确的AJAX，您就可以通过CORS headers加载远程内容。

这样的事情应该有效：

var $p = document.getElementsByTagName('p')[0];
var url = $p.getAttribute('src');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function insertContents() { 
  if (xhr.readyState === 4 && xhr.status === 200) {
    $p.innerHTML = xhr.responseText;
  }
};
xhr.open('GET', url);
xhr.send();

Answer 3

可能使用ajax

<p data-src="http://link.to/text.txt"></p>

JS：

$('p').each(function () {
    var $this = $(this);
    $.ajax({
        url: $this.data('src'),
        dataType: "text",
        success: function (data) {
           $this.html(data);
        }
    });
});

Answer 4

var client = new XMLHttpRequest();
client.open('GET', 'text.txt');
client.onreadystatechange = function() {
  alert(client.responseText);
}
client.send();

Answer 5

您可以使用IFrame显示文本文件。像这样-

调用文本文件来填充HTML中的段落 - 是否可能？

5 个答案: