i am trying to do something with jquery.
i have code like this 1.html;
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
</head>
<body>
<iframe src="2.html" id="frame1"></iframe>
<iframe src="3.html" id="frame2"></iframe>
</body>
</html>
in 2.html file. i am trying to access iframe container id. 2.html file content;
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#btnIdKim').click(function (){
});
});
</script>
</head>
<body>
<input type="button" name="btnIdKim" id="btnIdKim" value="Id Kim" />
</body>
</html>
when user clicked btnIdKim Button. i need to access parent iframe id which contains by button.
but i dont know how.
Thanks for every one who interested in.
There is an HTML5 (originally IE extension) property frameElement on window:
alert(frameElement.id);
But this is not globally supported; you won't get it in Google Chrome (at the time of writing; version 7) or in older versions of the other popular non-IE browsers.
Without this extension, you have to do it manually. Go to the parent window, and search through all its iframes to see if the document contained within is your own document:
function getFrameElement() {
var iframes= parent.document.getElementsByTagName('iframe');
for (var i= iframes.length; i-->0;) {
var iframe= iframes[i];
try {
var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
} catch (e) {
continue;
}
if (idoc===document)
return iframe;
}
return null;
}
alert(getFrameElement().id);
(The contentDocument workaround is necessary because IE<8 doesn't support it; the try...catch is needed to avoid security exceptions stopping the loop when it meets a frame from a different domain.)
The base jQuery search function will take a scope as a second param. It defaults to the current document, but you can specify a different document to search across iframe boundaries. I have done this for a previous project; this may not be exactly what you're looking for, but hopefully provides some hints.
From within an iframe you can access the top window's document like this:
$('#iframe2', top.document)
It sounds like you want to determine in which iframe did the click event occur, right?
I'm not sure exactly how to do that, as I had only one
For bonus fun, here's my event handler for resizing the iframe element in the parent doc based on the size of the iframe document:
$(document).bind('ResultsFrameSizeChanged:hybernaut', function(event){
var iframe = $('#results', top.document)[0];
if(iframe.contentDocument){ // IE
var height = iframe.contentDocument.body.offsetHeight + 35;
} else {
var height = iframe.contentWindow.document.body.scrollHeight;
}
// konsole.log("Setting iframe height to " + height);
$(iframe).css('height', height);
});
You then trigger that custom event on events that might change the document height (like ajax loading):
$(top.document).trigger('ResultsFrameSizeChanged:hybernaut');
At first I was binding that event to $('iframe').ready(), but this was inconsistent across browsers, and I ended up triggering it from several places within the ajax completion handlers.
Another important note is that if you load jQuery in your iframes, then you have several separate instances of jQuery, and many of your assumptions about how jQuery works are no longer correct (what's global now?). This can be very challenging. I'm not certain, but I believe that if you use namespaced events and trigger them on a specific document (i.e. top.document), then they will be handled in the correct context.
