親ページ内の Iframe のコンテンツを検索するテキスト入力要素を親ページに配置するにはどうすればよいか疑問に思っていました。
目標は、入力テキストを処理し、iframe 内の一致を強調表示することです。
提案されたアプローチや参考資料をいただければ幸いです。
ありがとう...
編集: 同じオリジン ポリシーの制限を理解しています。検索する iframe と javascript をレンダリングする親ページ、および親ページの iframe は同じドメイン オリジンになります。
HTML:
<input type="text" id="searchfor"/>
<iframe src="http://www.page.com" id="search">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</iframe>
ジャバスクリプト:
$('#searchfor').keyup(function(){
var page = $('iframe[id="search"]').contents().find("html").html();
var pageText = page.text().replace("<span>","").replace("</span>");
var searchedText = $('#searchfor').val();
console.log(searchedText);
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
page.html(newHtml);
});