通过jquery / javascript访问iframe元素

Question

OK, what I need to do is rather straightforward :

• I've got a webpage running inside an iFrame (in the very same folder, locally - it won't ever run from a server, that's all there is to it)
• I want to access its' elements via javascript from the initial page.
• When trying something like $('iframe').contents() , via the Chrome javascript console, I'm getting a warning about same-origin, etc.

Any ideas? It should be really easy...

---

PS I'm not interested in workarounds that don't include an iframe - it has to be an iframe ...

Answer 1

(1)

It is because the website you are loading in your iframe is in a different domain than the one hosting the iframe itself.

See this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

Thusly, the same origin policy will disallow Javascript to access/manipulate the page inside the iframe.

(2)

There is also a concept of sandboxing with HTML5, this attribute enables extra restrictions on the content that can appear in the inline frame. The tokens are: allow-same-origin, allow-scripts etc.

More Info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Please check if your iframe is sandboxed?

(3)

Then, there is the X-Frame-Options HTTP response header, which can be used to indicate whether or not a browser should be allowed to render a page in an iframe. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites. It looks like this:

<meta http-equiv="X-FRAME-Options" content="SAMEORIGIN">

The tokens here can be: deny, sameorigin or allow-from.

More Info: https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

And: http://tools.ietf.org/html/rfc7034

Please check if your page has got such header?

(Lastly):

If all of the above don't apply to your scenario, then things should just work. Please post more information like the markup and your javascript.