Question

我正在尝试更改iframe标记中单词的背景颜色。我能够搜索这个单词，但却无法获得如何更改颜色。这是我的代码。

＆＃13;

$(document).ready(function () {
   $('#content').contents().find('head').append($("<style type='text/css'> .red{color:red;}</style>"));
   var cont = document.getElementById('content').contentWindow.document.body.innerHTML;
          
   if($("#content").contents().text().search("SEARCH WORD")!=-1){
     console.log("Found");
     //<span class="red"> SEARCH WORD </span>
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-left: 0px;" class="col-sm-8 text-center">
  <iframe id="content" ng-src="http://locahost:8888/public/textfiles/sample.txt" 
          width="100%" height="500px" align="middle"></iframe>&emsp;
</div>

＆＃13;

Answer 1

如上所述，如果没有正确的CORS标题，CORS将不允许您更改来自您无法控制的其他域的iFrame。

如果您在同一个域中，则可以执行以下操作：查找单词，更改单词，然后使用新代码替换iframe的内容。这是一个working fiddle和代码例如：

<iframe src="http://fiddle.jshell.net/_display/" id="myIframe"></iframe>
<script>
var searchWord = "error";
$(document).ready(function(){
    $('#myIframe').ready(function(){
        var $html = $($('#myIframe').contents().find('body').html());
     if($html.contents().text().search(searchWord)!=-1){
       console.log("Found");
       var replaceWith = "<span style='color:red'>"+searchWord+"</span>"
       var newHTML = $html.text().replace(searchWord, replaceWith);
       $('#myIframe').contents().find('body').html(newHTML);
     }
   });
});
</script>

Answer 2

请不要忘记跨域策略，否则它将无效。并查看此Search for word and highlight with jquery

使用javascript / Jquery

2 个答案: