javascript/Jqueryを使用してiframe内の単語または文章を強調表示する

Question

iframeタグ内の単語の背景色を変更しようとしています。私は単語を検索することができますが、色を変更する方法は得られません。 ここに私のコードです。

$(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

前述のように、CORSは、適切なCORS見出しがないと制御できない他のドメインからのiFramesを変更することを許可しません。

同じドメインにいる場合は、単語を見つけて変更し、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