1

I'm trying to create somewhat of a highlighting/selecting tool [using jQuery] in my web app that watches what elements you hover over inside an iFrame, selects the hovered-over element, and uses that element's styling to create on overlaying <div>. Think of the element selection tool in your web inspector.

Here's a demo uses p,a, and h2 elements as the selector (hover over one): http://jsfiddle.net/ST539/1/

The problem I'm having is that this only seems to work on some web pages, and I'm not sure what is causing this. Here's another demo using example.com: http://jsfiddle.net/ST539/2/

No highlight on any elements. Anyone know what's up?

Jody Heavener
  • 2,704
  • 5
  • 41
  • 70

1 Answers1

0

Same origin policy. JavaScript can't access iframed documents from different domains.

There are some workarounds but most clean ones require some setting up in the other domain's page. See: Ways to circumvent the same-origin policy

Community
  • 1
  • 1
Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • Sorry for being the bringer of these news, but yes, same origin police is a very important security aspect. For example, imagine that you are `iframe`'ing ads in your page, you wouldn't like those to modify your parent page. `=]` Most of the workarounds listed above require some form of "authenticating" the access so the other page must allow access to it. – Fabrício Matté Apr 26 '13 at 02:58
  • 1
    Though, you may want to look into making a browser extension or something, Chrome extensions are not hard to make and don't have such restrictions I believe. – Fabrício Matté Apr 26 '13 at 03:00
  • Perhaaaaaps you might be able to help with this question as well? http://stackoverflow.com/questions/16228317/using-jquery-to-highlight-elements-cant-get-to-inner-elements – Jody Heavener Apr 26 '13 at 03:33