Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the jQuery / javascript context of a frame within an iframe?

Let me preface this with... I have referenced this question/answers and it seems to contain clues, but i'm still missing the whole picture

Run JQuery in the context of another frame

Essentially, the structure of the index page is this

<html>
<body>
  <div class="frames-wrap">
      <iframe id="this-iframe" src="location.php">

      </iframe>
  </div>
</body>
</html>

location.php then contains a frameset (ahem, not my idea...) that has two frames that are set up like so...

<frameset cols="350,*">
  <frame src="search.php" id="frame_search" name="search"/>
  <frame src="edit.php" id="frame_edit" name="edit" />
</frameset>  

if i want to manipulate objects between the index page and these elements how would i go about this?

I keep thinking the context should be something similar to window.parent.frames[0].document... what else am i missing?

like image 212
technicolorenvy Avatar asked Jan 27 '10 21:01

technicolorenvy


People also ask

What is #document in iframe?

Definition and Usage. The contentDocument property returns the Document object generated by a frame or iframe element. This property can be used in the host window to access the Document object that belongs to a frame or iframe element.

Can JavaScript access iframe content?

Apart from accessing an element by adding its control to the Controls Repository, there is also the possibility to access an element within a web page's iframe via Javascript.

How can get iframe HTML using jQuery?

# jQuery Code to Get HTML Content of IFrame contents(). find("html"). html()); }); The above code will return all the HTML content of our Iframe.


3 Answers

Preface: You wont be able to access the iframes contents unless it originates from the same domain.

To select elements in your iframe you could use a jQuery call like this

element = $("#this_iframe").contents().find("#frame_search")

The key is to use the contents() function. See Traversing/contents

like image 181
mikezter Avatar answered Nov 01 '22 00:11

mikezter


I think the link from technicolorenvy has the answer, but the selector has a lesser known second parameter where you can set the context.

Something like this:

var iframeDoc = document.getElementById('myIframe');
iframeDoc = (iframeDoc.contentWindow) ? iframeDoc.contentWindow : (iframeDoc.contentDocument.document) ? iframeDoc.contentDocument.document : iframeDoc.contentDocument;


// From the parent window
$('p', iframeDoc).html('Hello from parent');

http://docs.jquery.com/Core/jQuery#expressioncontext

like image 40
Ran Avatar answered Oct 31 '22 23:10

Ran


Giving your frames ids that are valid JavaScript identifiers would help, then you could use constructs such as window.top.this_iframe.frame_edit.document as your context.

like image 1
Neil Avatar answered Oct 31 '22 23:10

Neil