javascript - 从外部txt文件加载图像信息并在html文件中显示

Question

我想要一个 Javascript 函数从外部文本文件加载图像信息，并在我的 WordPress 网站上显示该图像。我在网上找到了一些代码来加载和解析外部文本文件。

尽管如此，我还没有成功地让它发挥作用。

我设置了一个单独的 html 测试页面，但这也不起作用。

我试图让网站加载该 js 文件并输出图像，在 mmusic div 中使用以下代码:

document.write('<a href="' + AdLinkPath[0] + '" target="_blank"><img src="' + AdFilePath[0] + '" width="' + AdWidth[0] + '" height="' + AdHeight[0] + '"/></a>');

我在 test.html 文件中尝试了相同的代码，但无法让它工作。

有人可以告诉我我做错了什么吗？

谢谢!

Answer 1

我不确定您的具体问题是什么，但您肯定可以采取很多措施来改进整体设计。

首先，你确定这就是你想要用 Javascript 做的事情吗？看起来您正在修改服务器上的文本文件来告诉您的页面要转换哪些广告。没关系，但如果可以选择，最好在服务器端进行。只需在使用 PHP 或类似语言(如果您有权这样做)将 HTML 发送回用户浏览器之前，在图像中包含适当的 URL。这消除了代码的复杂性，提高了页面加载速度，并且即使没有适当的 Javascript 支持也能正确显示您的广告。

如果您打算使用 AJAX 来执行此操作，那么我强烈建议您使用 JSON 格式的数据和某种类型的库来处理请求。解析文本文件会带来许多问题，而将数据格式化为 JSON 为您提供了一种将其转换为 Javascript 对象的廉价方法。 jQuery 是执行此操作的一种流行选择:http://api.jquery.com/jQuery.getJSON/

您可以将文件格式设置为:

{
    "img": "http://myhost/img/mm.jpg"
    "link": "http://myhost/"
    "width": "192"
    "height": "108"
}

然后您需要执行以下操作来更新页面上的图像字段:

$.getJSON("test.js", function(json) {
    $.each(json, function(key, value) {
        //parse the keys and values appropriately in here
    });
});

您可能也不想使用 document.write。这将覆盖页面的全部内容。您可能想以某种方式选择图像元素，然后更改其属性。为此，您可以使用 jQuery 选择器。请参阅有关操作的部分，了解选择 img 元素后对其进行修改的方法。

http://api.jquery.com/category/selectors/

http://api.jquery.com/category/manipulation/