javascript - 如何根据另一个页面中的内容更改图像链接

Question

我想在我的页面 (page1) 上放置一个图像，该图像是另一个页面 (page2) 的链接，但我希望根据 page2 的内容显示的图像是两个可能图像之一。

本例中的 Page2 是报告当前状态的 wiki 页面。如果没有要报告的问题，第 1 页上的图像将为绿色。如果列出了问题，图像将为红色。

我的计划是使用 html 注释标签来嵌入 <!--STATUSRED-->或<!--STATUSGREEN-->在我的维基页面上。然后我想我可以使用 javascript、Jquery 或类似的东西来检查我的评论是否存在并相应地更改 page1 上的图像。我只是不确定到底该怎么做。

我也愿意接受其他想法。无论我提出什么解决方案，wiki 用户都必须能够简单地进行更改，而无需用户更改 page1(这不是 wiki 的一部分)。

更新:

我最终做了什么:

$(document).ready(function() {
    statusCheck();
    setInterval(statusCheck,300000);
}

function statusCheck() {
    $.ajax({
        type: "GET",
        url: "path/to/wiki/MainPage.ashx",
        dataType: "html",
        cache: false,
        success: function(html) {
            $('#statusImage').attr('src', function() {
                if ($(html).find("#statusGreen").length)
                {
                    return '/images/green.gif';
                }
                else
                {
                    return '/images/red.gif';
                }
            });         
        },
        error: function(request,status, error) {
            $('#statusImage').attr('src', '/images/red.gif');
        }       
    });
}

然后在 wiki 页面上，我只需将相关 div 上的 id 属性更改为“statusGreen”或“statusRed”，如下所示:

<div id="statusGreen">
<font size="5" color="green">No issues to report.</font>
</div>

我想要更改的图像获得“statusImage”id:

<img id="statusImage" width="95" height="95" border="0" />

Answer 1

这是非常浪费的，因为您获取所有 wiki 页面的内容只是为了检查单个单词是否存在，无论如何，这是如何做到这一点的:

<div id="hidden_container" style="display: none;"></div>
<img src="" id="wikistatus"/>

function set_status() {
  var status_image = 'images/green.gif';
  $('#hidden_container').empty();
  $('#hidden_container').load('path/to/wiki.html #status', function() {
    var status = $('#hidden_container').text();
    var is_green = status.indexOf('<!--STATUSGREEN-->');
    if(is_green === false) status_image = 'images/red.gif';
    $('#wikistatus').attr('src', status_image);
    setTimeout('set_status();', 5000); // execute again in 5 seconds
  });
}

$(document).ready(function() {
  set_status();
});

在 wiki.html 中，确保将状态代码包装在容器中，并将 status 作为 id:

<div id="status"><!--STATUSGREEN--></div>