views:

94

answers:

3

I have a frame that's nested in an iFrame. <iframe>..<frameset..><frame id="report">. I have a jQuery reference, myFrame, to the report frame. I don't have control to the html. I am trying to modify an element in the frame. contents() doesn't work with frames. I tried using a context like myFrame.document & myFrame.contentDocument but they give errors.

How do I reference the frame's document or content using jQuery? Is a jQuery reference different than a javascript reference?

ADDITION:

EVERYTHING IS IN THE SAME DOMAIN. I know about the browser's cross domain security block.

ADDITION2:

I had some html code in my original question and didn't notice they got hidden.

+3  A: 

Is your frame that's inside your frame on the same domain as the container of the frame? You should know by now if they aren't on the same domain you can't manipulate it due to security limitations by the browser.

Is a jQuery reference different than a javascript reference?

jQuery IS Javascript, it does a lot of branching under the core so you don't have to do a lot of the dirty work.

Edit: Since no code was provided... had to make a demo myself.

http://medero.org/frame.html

$('iframe').contents().find('frame').get(0).contentWindow.document

Didn't test in IE.

For clarification...

  • $('#el') returns a jQuery object.
  • $('#el').get(0) returns the first element in the jQuery array-like object, a reference to the real DOM element.
meder
So he can't manipulate while he manipulates, then?
You
Yes they are in the same domain. I know jquery is Javascript. But jQuery works differently. When you use a jQuery selector, it returns an array. When you use getElementbyID is JS, you get a single reference. My question still holds, how is the frame content referenced?
Tony_Henrich
It's been ages since I've seen regular frames. Can you please provide a demo or markup at the very least?
meder
It returns a jQuery object when you select with $('');'$' is an alias for the jQuery class.The string you pass in is a parameter for the classes constructor. Then that object has all the usual methods like .html(), .hide() etc.
Keyo
@Keyo- I can't do myFrame.document when myFrame is a jQuery frame reference. I get 'undefined' error. But I can do top.frames["nameofframe"].document (this is a syntax example only)in regular JS. My frame is way deep in the dom hierarchy and I know how to get a reference to it using jquery only, not conventional JS.
Tony_Henrich
@Tony_Henrich - did you try what I last specified? The answer is **right there**. Please update us on your status.
meder
@meder- How is an element in the frame referenced. Say I want to get to the first image in the frame. If 'myFrame' is the frame reference and I do alert($(myFrame).get(0).contentWindow.document.find('img:first')); I get '... is not a function' error. Same error with any jQuery function.
Tony_Henrich
Don't use `.get(0)` if it's a reference to a DOM object. Why didn't you provide the code you used to get `myFrame` in your question?
meder
If you had posted your code, we wouldn't go through this confusing swamp of comments. Please post your code in future questions.
meder
Your get(0) gives a reference to HTMLDocument and not the first element.var myIframe = $('#blahblah).children('iframe:first');var myFrame = $(myIframe).contents().find('frameset#frameset').find('frame#report')[0];
Tony_Henrich
meder
"How do I reference the frame's document or content using jQuery? Is a jQuery reference different than a javascript reference?" You said document or content using jQuery. My expression does use jQuery.
meder
Please take this as a lesson to **provide code** for non-trivial questions, and **please include specifics** such as whether or not the domain is the same for the frames on your future questions. Also, I noticed you didnt even upvote the selected answer on some of your questions, **please upvote if you do select an answer**
meder
I provided code. I just didn't select it as code and therefore it didn't show up because I used html tags. I never used frames outside of my domain so I never thought to include the domain issue. And if someone has a question, ask, instead of quickly assuming it must be a cross domain issue. If you have an issue with not upvoting a selected answer, propose an automatic upvoting for selected anwsers at meta. I don't agree 100% of all my selected answers all the time. Sometimes its more about improving my accept rate. It's there as an option and people can decide not to upvote.
Tony_Henrich
meder
"I don't have control to the html" - If you read this as a person trying to answer the question, don't you think this is a sign that it isn't on the same domain? It's a hint that it's not on the same domain. The question did not clearly state it, and based on this statement which only points into the direction that it isn't on the same domain because you 'dont control it' that is why we flagged you for it. If you don't want this to happen, be explicit and specific upfront.
meder
My html is huge and very complicated and its business proprietary. I didn't edit the html, I edited the question to make it show up and I mentioned this in my edition. If it's a cross domain issue and I am trying to modify an element (I mentioned this in the question), then NOTHING can be done. Case closed.. but you assumed it's not since you were trying to provide some jquery code. Again if you needed to take route A or B, then ask upfront. Then don't blame me later for ambiguity after making an effort. You also didn't understand my question.
Tony_Henrich
You also didn't understand my question. The question title says reference to an element in the frame. Your direction is about a frame's document. I don't have control over the html can also mean a closed source third party control producing the html. Very popular with asp.net server controls. Anyways I don't want this to turn into a heated discussion. I appreciate your efforts.
Tony_Henrich
You downvoted my question and downvoted my answer and you want me to upvote all selected answers? Seems to be an extreme voting system to me!
Tony_Henrich
+1  A: 

Yo dawg...The browser security model will prevent any DOM access to an iFrame from a different domain. This is to prevent somebody embedding a page and them sabotaging the content/layout, capturing form data and so on.

If you have access to the source of the iFramed page you can (via a third iFrame on the same domain as the browser viewport) send information to the top page via url parameters. Otherwise you're out of luck.

There isn't much point doing this if you just want to change the layout of the page since you'll have css access anyway. But it is useful for setting the height of the iFrame to whatever the scroll height of the iFrame is.

Edit I think this is what you were looking for: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

$('#iframeID').contents().find('#someID').html();
Keyo
It's a frame Iam targeting. It's not an iFrame. They are in the same domain. I am looking for the jQuery selector syntax.
Tony_Henrich
I don't think a downvote is reasonable considering you didn't specify whether it was the same domain or not, in addition you didn't post your full code or linked a demo. You also said "I don't have control to the html" which might have indicated that it might not be the same domain.
meder
Sorry if you didn't understand my answer. I've added a link to a solution and provided the jQuery snippet that should select the iFrame contents.Don't forget you can also use .load() to bring the contents into the same page via ajax.
Keyo
@Keyo - He was referring to a regular `frame` element. jQuery's `contents` internally checks the nodeName for `iframe` so it doesn't apply the same code, though it technically is the same code to grab the reference.
meder
Ah okay, that's the first time I've seen frames mentioned in a while...
Keyo
A: 

This is the selector:

$(top.window.frames['frameID'][1].document).contents()[0].find('elementinFrame')

Although it doesn't work every single time and I am still find out why.

Tony_Henrich