Hervorhebung eines Wortes oder Satzes in iframe, mit Javascript/Jquery

Question

Ich versuche, die Hintergrundfarbe des Wortes im iframe-Tag zu ändern. Ich bin in der Lage, das Wort zu suchen, aber nicht, wie man die Farbe ändert. Hier ist mein 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>

Answer 1

Wie bereits erwähnt, wird CORS Ihnen nicht erlauben, iFrames aus anderen Domänen, die Sie nicht steuern, ohne die richtige CORS Überschrift zu ändern.

Wenn Sie sich in derselben Domäne befinden, können Sie möglicherweise etwas wie das Wort suchen, ändern und dann den Inhalt des iFrame durch Ihren neuen Code ersetzen. Hier ist ein working fiddle und Code Zum Beispiel:

<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

Bitte führen Sie die domänenübergreifende Politik nicht vergessen, sonst wird es nicht funktionieren. Search for word and highlight with jquery