我正在尝试更改 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> 
</div>
如前所述,CORS 将不允许您更改来自其他域的 iFrame,如果没有正确的 CORS 标题,您无法控制。
如果你在同一个域上,你可以做一些事情,比如找到单词,改变它,然后用你的新代码替换iframe的内容。这是一个工作小提琴和代码例如:
<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>
请不要忘记跨域策略,否则它不起作用。并检查此 搜索单词并使用 jquery 突出显示