在iframe中突出顯示一個單詞或句子，使用javascript/jquery

我正在嘗試更改iframe標記中單詞的背景顏色。我能夠搜索單詞，但沒有得到如何更改顏色。這是我的代碼。在iframe中突出顯示一個單詞或句子，使用javascript/jquery

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

來源

2017-10-20 naik3

您的代碼段導致錯誤。可能是因爲你的iframe的src'指向本地主機 – tommyO

可能重複[搜索字和用jquery突出顯示]（https://stackoverflow.com/questions/31592132/search-for-word-and-highlight-with -jquery） – RogerC

如前所述，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>

來源

2017-10-20 14:47:04

嗨安德魯，謝謝你的回覆。如果iframe src是一個文本文件，該怎麼辦？在文本文件上也可以使用相同的代碼嗎？ – naik3

當然，我不明白爲什麼不。只要iFrame src在你自己的域名上。 –

好吧，我會試試這個。感謝您的回覆。 – naik3

請不要忘了跨域策略，否則將無法正常工作。並檢查該Search for word and highlight with jquery

來源

2017-10-20 14:41:02

在iframe中突出顯示一個單詞或句子，使用javascript/jquery

回答

相關問題