How to access element present inside a iframe from parent window? - javascript

I have an iframe. I want to access a table which present inside iframe.I want to access it from parent window of iframe. I have written JS like
Document.getElementById("table Id");
But the result come null. What is the process to get it?
thanks

x=document.getElementById("iFrameId");
x.contentDocument.getElementById("tableId");
if you can use jQuery i guess it will work across browsers
$("#iFrameId").contents().find("#tableId")

You have to select the element from the iFrame's document. Per Juan's comment, check against both the name, and id of the iFrame
var targetFrame = window.frames["nameOfIFrame"] || window.frames["iFrameId"];
targetFrame.document.getElementById("tableId");
EDIT
I just tested this with the following:
window.frames["fName"].document.getElementById("Adam").innerHTML
in the Chrome console, and it output the html of the Adam div from within my iframe.

Related

Dynamic generated iframe does not return its name and not identify iframe into DOM?

I have created one application where I am generating multiple nested iframes dynamically. In my structure, I have one iframe name as "list" along with same value to ID attribute. I get name as " ", In chrome when I tried to check its name as mentioned below:
"parent.content0.list" OR parent.frames['content0'].frames['list']
Only I get its name when I use index of its iframe like below
"parent.content0.frames[0]" OR parent.frames['content0'].frames[0]
All my iframes have name and Id attribute with same value.
Also, in chrome and Mozilla I get iframe instead of window object when i try below line of code on debugger:
parent.frames['content0'].frames['list']
but index path give window object
parent.frames['content0'].frames[0]
Check attached screen shot for more clarification. check this image
Let me know if you need any other details.
Don't know why iframe with index 0 have this issue in my code. All other iframes and index iframes are accessible and return correct value.
Because of this my form target is also not working as expected because my form has same iframe name as target.
Can anyone please help me to understand this behavior?
Note: Standalone code gives me correct name but dynamically created iframe[0] create an issue.

Grabbing the class on an iframe

I am able to grab the id from an iframe with this
var iFrame = window.top.document.getElementById('window_<?php echo $_product->getId() ?>_content');
however I can not figure out how to grab the class of that iframe. The prototype library is loaded on the site as well but I do not know how to make the $ selector grab something from window.top
The reason I have to do this is because the id is generated in two different ways from the site and will not work for my purposes.
I started playing around with
var iFrame = window.top.document.getElementsByClassName('theIframe');
but it is not working for me yet...
Any ideas on how I can grab the class name of the iFrame? How can I reach to top with prototype selector?
This will return the class:
window.top.document.getElementById('window_<?php echo $_product->getId() ?>_content').className
If you are storing the iframe element in a variable anyway, you can use:
iFrame.className

Check all checkboxes inside an iframe (when inviting guests to a facebook event)

i'm trying to check all checkboxes when inviting guests to a facebook event. Facebook has changed something i think beacuse i usually used this code and now it is not working:
var elms=document.getElementsByName("checkableitems[]");
var lunghezza = elms.length;
for (i=0;i<lunghezza ;i++){if (elms[i].type="checkbox" )elms[i].click()};
I discovered that the modal windows to invite guests is inside an iframe but i can't checkboxes inside it!
I've used
jQuery('iframe#iframe_sbx_id').find('input[type=checkbox]').click()
but it doesn't work because find() returns an empty set. Any idea on how to do it?
You could use contents() to access the content of the iframe, but because it's on another domain, it won't work:
The .contents() method can also be
used to get the content document of an
iframe, if the iframe is on the same
domain as the main page.

Get javascript loaded content

Let's say I have a button on a page, if clicked it adds a div popup.
How can I access the div's content through JavaScript? Is this possible? I've tried searching the page with jQuery selectors but I did not find the div popup.
I have a bookmarklet that is similar to what follows:
javascript:(function() {
alert($('newDivId').val());
})();
...suppose that newDivId is the id of the newly created div, if I execute that code by clicking on the bookmarklet I get an error saying that val() cannot be invoked on a null object.
I do not have access to the page source; do you have any suggestion?
$('#id_of_div').html()
OR
$('.class_of_div').html()
OR
$('#id_of_div_parent div').html()
ETC.
If that doesn't work, you might be trying to select it before it has been full inserted into the DOM. Be sure it's fully loaded before you try to access it.

javascript, iframe - navigate/close parent window from iframe

Good day to all.
I have this setup:
One page with text/whatever, that also includes an iframe (the page in iframe is created by me so I have access to it, I can modify its content).
What I need to do is that when I access a link from the iframe to open it on the mother page (navigate).
Until now I kind of failed to do that so any help would be appreciated.
For any further info just ask.
In all of the links that you want to affect the parent window do something like this:
GO THERE!
Or with javascript:
<a href="javascript:window.parent.location = 'somthing.html';" >GO SOMEWHERE!</a>
If all you need to do is change the parent window's location from inside the iframe, it is very simple:
window.parent.location = 'newWindow.html';
Or if you are using a link, just use it's "target" attribute.
You should use the target attribute <a href="" target="...">
For all the possible values of target, you can go here.

Categories