1

I am trying to change the background colour of word in iframe tag. I am able to search the word, but not getting how to change the colour. Here is my code.

$(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>
   }
})
<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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
naik3
  • 319
  • 2
  • 8
  • 22
  • Your snippet results in an error. Probably because you're iframe `src` is pointing to localhost – Tom O. Oct 20 '17 at 14:32
  • Possible duplicate of [Search for word and highlight with jquery](https://stackoverflow.com/questions/31592132/search-for-word-and-highlight-with-jquery) – Guillaume Georges Oct 20 '17 at 14:46

2 Answers2

1

As noted, CORS will not allow you to alter iFrames sourced from other domains you do not control without the proper CORS heading.

If you are on the same domain, you can possibly do something like find the word, alter it, and then replace the contents of the iframe with your new code. Here is a working fiddle and code For example: 

<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>
Andrew Lohr
  • 5,380
  • 1
  • 26
  • 38
  • Hi Andrew, thanks for reply. What if the iframe src is a text file. On text file also can we use the same code? – naik3 Oct 20 '17 at 17:44
  • sure I don't see why not. As long as the iFrame src is on your own domain. – Andrew Lohr Oct 20 '17 at 17:47
  • Hi Andrew, I have created an [plunker](https://plnkr.co/edit/EnS6YRHIcb3tosbGXNoh?p=preview). can you please have look of it. Its not working. – naik3 Oct 20 '17 at 18:00
  • I took a look and the iframe body is empty (browser is doing this on purpose). I think it has to do with CORS and how plunker is setup. I am not sure how to get it working with plunker. It might work with your local dev setup if you try it there – Andrew Lohr Oct 20 '17 at 19:21
  • Hi andrew, thanks for the help. As a just jquery code it is working nicely, i have posted another [question](https://stackoverflow.com/questions/46881808/search-for-word-and-color-it), implemented your code in angularjs. Facing some problem with jquery if condition. can you please help me with that. – naik3 Oct 23 '17 at 04:09
0

Please don't forget the cross-domain policy, otherwise it won't work. And check this Search for word and highlight with jquery

Cosmin_Victor
  • 154
  • 1
  • 13