Highlight text within an iframe

Question

I am trying to highlight text which is inside of an iframe.

Outside of an iframe, it works perfectly:

$('p').highlight('text');

To highlight text within an iframe, I used the following code but it doesn't work:

$( 'iframe' ).contents().find('html').highlight('domain');

https://jsfiddle.net/1tvsj8ho/

On jsfiddle you may get an error (Blocked a frame with origin) but to me that's not important, since I am using a local file.

is the iframe url on the same domain? If not you cannot do anything to it without the iframe src allowing it. — Get Off My Lawn, Jan 24 '18 at 16:31
maybe this helps you: https://stackoverflow.com/questions/1654017/how-to-expose-iframes-dom-using-jquery — messerbill, Jan 24 '18 at 16:33
A local file is considered a different domain if I am not mistaken. You should run the two files on a web server. — Get Off My Lawn, Jan 24 '18 at 16:34
Possible duplicate of [Using iframe with local files in Chrome](https://stackoverflow.com/questions/17950598/using-iframe-with-local-files-in-chrome) — Get Off My Lawn, Jan 24 '18 at 16:38
He did say "on the same domain"; it seems fair to assume that that's what he meant by "local". — Daniel Beck, Jan 24 '18 at 19:21

score 0 · Answer 1 · answered Jan 24 '18 at 19:47

Assuming the files are on the same domain at a real (non-file://) URL, so you have no CORS restrictions to worry about, you should be able to do this by waiting for the iframe's load event to fire before calling your highlight function:

$(function() { // document ready for parent window
  // highlight in the parent:
  $('p').highlight('text');

  // highlight inside iframe...
  $('iframe').on('load', function() { // ...when it's ready
    $(this).contents().find('p').highlight('text')
  });
});

(It's unfortunately difficult to demonstrate this in a snippet, due to those very same CORS restrictions, but I've tested this on my own localhost and it does work provided the highlight() function is defined in the parent window.)

Highlight text within an iframe

1 Answers1