搜索iframe中的内容与父页面上jQuery和输入元素(Search iframe content

2019-10-29 17:22发布

我不知道我怎么能有它搜索的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>

JAVASCRIPT:

$('#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);
    });
文章来源: Search iframe content with jquery and input element on parent page