I am trying to access an element which is inside of a frame but haven't had any luck getting to it so far. I have read through a lot of examples here on stackoverflow and in jQuery's documentation but all the examples I've seen have been in reference to iFrames which behave differently than traditional frames. My page structure is as shown below with actual contents removed:
<html>
<head></head>
<frameset>
<frame name="Menu"><html><body>
<!--Menu contents-->
</body></html></frame>
<frameset>
<frame name="SettingsTree"><html><body>
<!--Setting options-->
</body></html></frame>
<frame name="SettingsGrid" id="SettingsGrid"><html><body>
<div id="findthis"></div>
<!--Setting grid values-->
</body></html></frame>
</frameset>
</frameset>
</html>
The way to get contents of "findthis" within an iFrame would be
$('#SettingsGrid').contents().find('#findthis')
however this doesn't return anything. The $('#SettingsGrid') object exists with a length of 1 and all of the html I would expect it to have. However when I call .contents() on that object it returns nothing. I don't know if this is because it hasn't been properly loaded into the DOM or if there is some other issue.
Try this:
$('#findthis', window.parent.frames[0].document)
Or from the top level:
$('#findthis', top.window.frames[0].document)
See previous question/answer: Run JQuery in the context of another frame
This worked for me, if the frame has a name as well as an id:
$('#frame_id',top.frames["frame_name"].document) ...
My best working solution on IE8 / IE11 Enterprise mode with jQuery 1.11.1 is:
$('#findthis', $('#SettingsGrid')[0].contentWindow.document)
Have you tried $('#findthis', $('#SettingsGrid'))
?
The second argument within the outer jquery is the context in which to make the search referred to by the first argument. When no second argument is given then it is by default the root.
For me good way to do this was to find a frame by class, and than use jquery`s prop() method and contentwindow. Unfortunately in this frame must be declared by some function which does a tasks for you e.g. findAndsubmitForms() method.
parent window:
$('.frameClass or #id or so').prop('contentWindow').findAndSubmitForms();
child window (frame):
function findAndSubmitForms(){
$('form').submit();
}
If this is not possible to declare such method inside frame it of course could be done by defining it like this:
$('.frameClass').prop('contentWindow').findAndSubmitForms=function(){...};
and than call our desired function :d
have a nice day and wish you a great time looking at screen :D