Question

我希望在整个HTML页面中更改单词Up（绿色）和Down（红色）的文本颜色。但是，包含这些单词的数据将从文本文件中提取并更改。我无法弄清楚当从HTML文件外部提取数据时如何更改文本颜色。

您可以看到我使用jQuery脚本进行的一些尝试，但它们都没有成功。我对jQuery知之甚少，因此脚本可能会出错。

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Ping Results</title>
<meta http-equiv="refresh" content="10" > 
</head>
<!-- Styles --> 
<style style="text/css">
body {
  background-image: url("https://designnavigator.daimler.com/files/images/Daimler/basic_elements/Buerstung_Abb_00.png");
  background-position: 50% 50%;
  background-repeat: repeat;
}
</style>

<body>

<script language="jQuery">
 (function($) {
    var thePage = $("body"); 
    thePage.html(thePage.html().replace(/(^.*\b(Down)\b.*)$/igm, 
     '<span style="color:red;font-weight: bold;">$1</span>'));
    })(jQuery);
</script>

<script language="jQuery">
 (function($) {
    var thePage = $("body"); 
    thePage.html(thePage.html().replace(/(^.*\b(Up)\b.*)$/igm, 
     '<span style="color:green;font-weight: bold;">$1</span>'));
    })(jQuery);
</script>

<h3>&nbsp; Client Pings - Up or Down</h3>
<div id="list">
    <p><iframe src="Results.txt" frameborder="40" height="500"
        width="95%"></iframe></p>
</div>

</body>
</html>

Answer 1

以下情况仅在满足以下条件时才有效：

iFrame中加载的文件是从域（same origin policy）
文本文件实际上是一个html文件（或者至少服务器使用mime类型text / html传递文本文件）。这是因为iframe将呈现文本周围带有<pre>标记的纯文本文件，文本中的任何标记都不会更改颜色或其他内容。

＆＃13;

$('#frame').on('load', function() {
    frame_body = $('#frame').contents().find('body');
    replaced_content = frame_body.html().replace(/\b(down)\b/igm, '<span class="down">$1</span>').replace(/\b(up)\b/igm, '<span class="up">$1</span>');
    frame_body.html(replaced_content);
    frame_body.find('.up').css('color', '#0f0');
    frame_body.find('.down').css('color', '#f00');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<iframe id="frame" width="100%" src="text.html"></iframe>

＆＃13;

附加内容：

等待框架完成加载。
访问iframe的正文。
用类添加周围跨度。
将样式应用于已使用的类。

在整个HTML页面中更改特定单词的颜色 - 来自文本文件（.txt）的数据

1 个答案: