Using jQuery to get a value from an element in an iFrame

Question

I've scoured the interwebs, and found quite a bit of answers that relate to what I want to do, such as:
Javascript - Get element from within an iFrame
How can I access iframe elements with Javascript?
Access iframe elements in JavaScript

With no proper results.

I currently have a test box in an iFrame. From the Parent, I need to get the value of the textbox onBlur().

I'm currently down to using;

alert("before");
var iframe = document.getElementById('GeneralInformationPrivate.aspx');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

//innerDoc.getElementById("imageLoc").hide();

alert("after");

With the line commented, I see both alerts.. Without it commented, it doesnt get that far.
(I am hiding it just as a test - Which just doesnt work).

Can anyone point me in the right direction.

Edit The loaded iFrame HTML looks like this:

<iframe id="GeneralInformationPrivate.aspx" class="iframetab" src="GeneralInformationPrivate.aspx"><!-- Controls Here --></iframe>

Edit 2 The iFrames are loaded like so. (In the parent)

<div style="float: right; width: 570px;">
            <div id="tabs">
                <ul style="">
                    <li><a class="tabref" href="#tabs-1" rel="GeneralInformationPrivate.aspx">General</a></li>
                    <li><a class="tabref" href="#tabs-2" rel="www.google.co.za">Friends</a></li>
                    <li><a class="tabref" href="#tabs-3" rel="">Challenges</a></li>
                </ul>
                <div id="tabs-1">
                </div>

                <div id="tabs-2">
                </div>

                <div id="tabs-3">
                </div>
            </div>
        </div>

On document Load (still in the parent)

// ++ IFRAME TABS
            var $tabs = $('#tabs').tabs(); //Set the tab

            //Loads the initial tab
            function getSelectedTabIndex() {
                return $tabs.tabs('option', 'selected');
            }
            beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");

            //Send the correct data to load
            loadTabFrame($(beginTab).attr("href"), $(beginTab).attr("rel"));

            // Does something everytime you click the tab
            $("a.tabref").click(function () {
                //event code
            });

            //Load the actual iFrame
            function loadTabFrame(tab, url) {
                if ($(tab).find("iframe").length == 0) {
                    var html = [];
                    html.push('<div class="tabIframeWrapper">');
                    html.push('<iframe id="'+ url +'" class="iframetab" src="' + url + '">Load Failed?</iframe>');
                    html.push('</div>');
                    $(tab).append(html.join(""));
                    //$(tab).find("iframe").height($(window).height() - 80); // Set the height of the iFrame (Currently using CSS - See controlStyle.css iFrame)
                }
                return false;
            }

            //Make sure its only loaded on click
            $("a.tabref").click(function () {
                loadTabFrame($(this).attr("href"), $(this).attr("rel"));
            });
            // -- IFRAME TABS

Which thel loads the page into the iFrame.

Edit 3 Contents of iFrame (sorry)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GeneralInformationPrivate.cs" Inherits="member.Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>General Information</title>
</head>
<body style="background: white">
    <form id="form1" runat="server">
        <div style="min-height: 100px; width: 100%; padding: 0px" id="divProInfo">
                <table style="width: 100%">
                    <tr>
                        <td>
                            <div class="divRegInput" style="padding: 5px 0px 10px 15px">
                                <asp:Label ID="Label12" runat="server" Text="Image URL" Font-Bold="True"></asp:Label>
                                <asp:Label ID="Label13" runat="server" Text="make yourself look good" CssClass="styleLabelWatermarkWashout"></asp:Label>
                                <br />
                                <input id="imageLoc" class="styleTextBoxCenter Larger" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divRegInput" style="padding: 5px 0px 10px 15px">
                                <asp:Label ID="Label6" runat="server" Text="Website URL" Font-Bold="True"></asp:Label>
                                <asp:Label ID="Label7" runat="server" Text="show others where you came from" CssClass="styleLabelWatermarkWashout"></asp:Label>
                                <br />
                                <asp:TextBox ID="TextBox1" runat="server" CssClass="styleTextBoxCenter Larger" />
                                <asp:Label ID="lblWebsiteTitle" runat="server" CssClass="styleLabelWatermark"></asp:Label>

                            </div>
                        </td>
                    </tr>
                    <%--<tr>
                        <td>
                            <asp:Button ID="Button1" runat="server" Text="Button" CssClass="styleButtonGreenHolder" Height="43px" CausesValidation="False" OnClick="btnChangeChallenge_Click" Width="195px" />
                        </td>
                    </tr>--%>
                </table>
            </div>
        </div>
    </form>
</body>
</html>

I've added the code. - With the iFrame. I havent deleted anything just incase other controls are messing around. — TheGeekZn, Mar 13 '13 at 10:49

score 1 · Answer 1 · answered Mar 13 '13 at 10:31

1

The line

innerDoc.getElementById("imageLoc").hide();

...is failing because DOM elements don't have a function called hide on them. That's a jQuery thing.

You can wrap the element in a jQuery instance:

$(innerDoc.getElementById("imageLoc")).hide();

answered Mar 13 '13 at 10:31

T.J. Crowder

879,024
165
1,615
1,639

This fires off the second alert, but doesnt do anything to the control. – TheGeekZn Mar 13 '13 at 10:41
@NewAmbition: We'd need more context to help further. – T.J. Crowder Mar 13 '13 at 10:42
I've added how I loaded the iFrame – TheGeekZn Mar 13 '13 at 10:47
@NewAmbition: Still doesn't tell us anything about the *content* of the `iframe`, which is important given you're saying that the code above isn't doing anything to that content. – T.J. Crowder Mar 13 '13 at 10:48
@NewAmbition: Well, you clarly have an element with the `id` `"imageLoc"`, I can't see why it wouldn't be hidden by the above... – T.J. Crowder Mar 13 '13 at 11:08
Same here. If I use `innerDoc.getElementById("imageLoc").value = "Ths";` I get this error: `Uncaught TypeError: Cannot set property 'value' of null ` – TheGeekZn Mar 13 '13 at 11:10
@NewAmbition: Works for me: http://jsbin.com/eyajut/1 (source: http://jsbin.com/eyajut/1/edit ) That error indicates that for some reason, you're not getting the element from `innerDoc.getElementById`. – T.J. Crowder Mar 13 '13 at 11:12
Even when I remove everything from the iFrame Page, except the input, it doesnt work. Question: Is it not because the iFrame is getting loaded with jQuery..? – TheGeekZn Mar 13 '13 at 11:19

score 0 · Accepted Answer · answered Mar 13 '13 at 11:34

0

I have finally stumbled accross the solution.

I had to put the code in: $(window).load(function () {/*code*/}), after all my pages code.

Only then did it work.

answered Mar 13 '13 at 11:34

TheGeekZn

3,195
7
43
85

Using jQuery to get a value from an element in an iFrame

2 Answers2