iframe内に特定の文字列がある場所を表示させるには？

iframe内に、他ページの一部を表示させたいのですが、
特定の文字列がある部分を、表示させたいのです

説明が難しいので、画像を添付しました


例えばYahoo! JAPANさんで、
「イチロー」と言う文字列が出てたら、
その文字列の表示されている部分を表示させたい

また別の日、
「サブロー」と言う文字列が出てたら、
その文字列の表示されている部分を表示させたい


引用元のページの条件として、
「イチロー」と「サブロー」は、必ずどちらかが表示されます
「イチロー」と「サブロー」は、同時には表示されません
「イチロー」と「サブロー」は、別の場所に表示されます


ちなみに引用元のサイトからは許可を得てるので、
著作権どうのこうのの話はご遠慮ください

あくまで技術的に出来るかどうかお願いします

質問者からの補足コメント

• 「呼び出すファイル」：URL
  「イチロー」：文字列（英語）
  最後に<iframe>を付けてみました。
  
  申し訳ございませんが、URLのトップから貼り付けられています・・・

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/07/05 07:25

No.5 ベストアンサー 回答者： yambejp 回答日時： 2016/07/06 10:32

>また成功率も低いです

まあ無理やりやればこういうこともできますよって例ですから・・・
ちゃんとやるなら、サーバー側のプログラムでクロールして
ソースにidを埋め込む処理などが必要です

この回答へのお礼

わかりました・・・
いろいろありがとうございます

お礼日時：2016/07/07 17:25

No.4 回答者： yambejp 回答日時： 2016/07/05 22:23

もうしわけない、loadよりreadyのほうが良いかも

<script>
$(function(){
$('#f0').ready(function(){
var txt=$('#f0')[0].contentDocument.body.innerHTML;
var reg=new RegExp('イチロー');
if(txt.match(reg)){
txt=txt.replace(reg,function(s){return '<span id="ichiro" style="color:red">'+s+'</span>';});
$('#f0')[0].contentDocument.body.innerHTML=txt;
$('#f0')[0].src=$('#f0')[0].src+"#ichiro";
};
})
});
</script>

またjQueryの組み込みは1系を想定して書いたので
https://code.jquery.com/jquery-1.12.4.min.js
あたりをコピペしてみてください

この回答へのお礼

ご丁寧にありがとうございます

http://hiphopabs-dvd.net/x.html

一応できたのですが・・・
再読み込みすると、また元に戻ります

また成功率も低いです

あんまり安定しないです
サーバーの問題？ではないでしょうけど・・・
　

jQueryは初めて使うので、さっぱり無知で申し訳ないです

お礼日時：2016/07/06 06:40

No.3 回答者： yambejp 回答日時： 2016/07/05 12:36

とりあえず同じサイト内でテストをしてください

また、x.htmとy.htmの文字コードを合わせてください

//x.htm
<iframe src="y.htm" width=800 height=400 id="f0"></iframe>
<script src="js/jquery.js"></script>
<script>
$(function(){
$('#f0').load(function(){
var txt=$('#f0')[0].contentDocument.body.innerHTML;
var reg=new RegExp('イチロー');
if(txt.match(reg)){
txt=txt.replace(reg,function(s){return '<span id="ichiro" style="color:red">'+s+'</span>';});
$('#f0')[0].contentDocument.body.innerHTML=txt;
$('#f0')[0].src=$('#f0')[0].src+"#ichiro";
};
});
});
</script>

//y.htm
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>イチロー</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

これで、イチローが赤くなって頭出しされませんか？

この回答へのお礼

一応やってみましたが・・・
http://hiphopabs-dvd.net/x.html
http://hiphopabs-dvd.net/y.html

うまくいかないようです

jquery.js
もしかして、これをサーバーに入れなきゃダメでしょうか？

jquery-3.0.0.min.jp
こちらをダウンロードして、「jquery.js」に名前を変えて、
また、「jquery-3.0.0.min.jp」そのままでHTMLをいじって、
いずれも試してみましたが、ダメなようです

ブラウザはクロム、IE、Firefoxで試しました
いずれも最新版（に限りなく近い）です

お礼日時：2016/07/05 18:32

No.2 回答者： yambejp 回答日時： 2016/07/04 23:26

たとえばjQueryで無理やりやるとこんな感じ？

<iframe src="呼び出すファイル" width=800 height=400 id="f0"></iframe>
<script src="js/jquery.js"></script>
<script>
$(function(){
$('#f0').load(function(){
var txt=$('#f0')[0].contentDocument.body.innerHTML;
var reg=new RegExp('イチロー');
if(txt.match(reg)){
txt=txt.replace(reg,function(s){return '<span id="ichiro" style="color:red">'+s+'</span>';});
$('#f0')[0].contentDocument.body.innerHTML=txt;
$('#f0')[0].src=$('#f0')[0].src+"#ichiro";
};
});
});
</script>

この回答へのお礼

「呼び出すファイル」：URL
「イチロー」：文字列（英語）
最後に<iframe>を付けてみました。

申し訳ございませんが、URLのトップから貼り付けられています・・・

お礼日時：2016/07/05 07:26

No.1 回答者： yambejp 回答日時： 2016/07/04 18:42

＞ちなみに引用元のサイトからは許可を得てるので、

ってことは一般に言う「X-Frame-Options」対策などは不要ということでOK？
にしてもjavascriptでやるのは難しいので、
なんらかのサーバーサイドで動作するプログラムでクロールして、
特定のidを埋め込んで飛ぶのが現実的かなぁ

この回答へのお礼

ごめんなさい、この「X-Frame-Options」がよく分かりませんが、
知り合いのサイトなので、無断転載とかでは無いという意味です

なんにせよ難しいんですね・・・

お礼日時：2016/07/04 19:52