highlight text inside iframe with jquery

Question

I try to highlight text in a page use jquery.highlight-4.js.

$('body').highlight('t');

My webpage contain an iframe which source on the same domain.

It doesn't work for text inside iframe ( the iframe is on same domain with my web page).

Please help me.

score 1 · Answer 1 · answered Oct 13 '18 at 08:59

$(iframeID).contents().find('body').highlight(keyword);
or
var iframes = document.getElementsByTagName("iframe"); $(iframes[0].contentWindow.document.body).highlight(keyword);

And don't forget to add .highlight { background-color: yellow } to the style of the sub-page in the iframe.

score 0 · Answer 2 · answered Nov 08 '12 at 03:51

0

think you should get the iframe first, like $("#frameID"), then you can manipulate with something in that...

answered Nov 08 '12 at 03:51

nhanlc

103
2
8

score 0 · Answer 3 · answered Nov 08 '12 at 04:10

0

Your code is highlighting the entire body, however the content inside the iFrame is not, by most browsers, considered to be in the same body as the current document.

In short, $('body') includes everything in the page but things inside an iFrame is excluded (due to the awkward nature of iFrame).

Highlight the content by explicitly selecting it using jQuery instead.

I tend to avoid iFrame at all cost. jQuery is pretty powerful in real-time manipulation of HTML contents that I was never really forced to use an iFrame.

answered Nov 08 '12 at 04:10

Gapton

2,044
2
20
33

So how can i highlight some text search on iframe? – Thelinh Truong Nov 08 '12 at 04:16
See if this helps: http://stackoverflow.com/questions/6316979/selecting-an-element-in-iframe-jquery – Gapton Nov 08 '12 at 04:22

highlight text inside iframe with jquery

3 Answers3