Access iframe elements via jquery/javascript

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...

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

Using Javascript to access iframes (or any other resource) when using the file:/// protocol is fraught with difficulty. This is for good security reasons. The simplest solution is to run a local web server. — lonesomeday
– lonesomeday, Commented Dec 7, 2013 at 10:52
Each file is considered each own domain. It will not work. See stackoverflow.com/questions/12587731/… — Martin Hansen
– Martin Hansen, Commented Dec 7, 2013 at 10:59
@MartinHansen and @lonesomeday: Only if the Op is using the file: protocol. If http is being used then there should be no problems. — Abhitalks
– Abhitalks, Commented Dec 7, 2013 at 11:07

Community · Accepted Answer · 2021-10-07 06:09:01Z

2

(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: https://www.rfc-editor.org/rfc/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.

edited Oct 7, 2021 at 6:09

CommunityBot

11 silver badge

answered Dec 7, 2013 at 10:47

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dr.Kameleon Over a year ago

Well, I don't think you've read my initial question. All I have is let's say 2 files : index.html and index2.html residing in the very same (local) folder. index2.html is running inside the iframe. So, what different domain?

Abhitalks Over a year ago

@Dr.Kameleon: Ok, I misread it, I thought your site was local.

Dr.Kameleon Over a year ago

However, the mystery still remains : why does chrome complain about attempting the cross-domain access?

Abhitalks Over a year ago

@Dr.Kameleon: I just re-checked it to be sure. It just works on my comp, as it should!

Dr.Kameleon Over a year ago

What OS/Browser combination?

|

Collectives™ on Stack Overflow

Access iframe elements via jquery/javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related