Search code examples
jqueryhtmldomcross-browserreportviewer2008

Trying to get this jQuery selector to work in FF, currently only works in IE; regarding ReportViewer 2008

The ReportViewer 2008 web control emits a nasty HTML DOM structure. I'm trying to get to a certain element deep down in the HTML, and am currently only able to get my jQuery selector working in IE. I'm hoping someone could help me out with that last part!

The HTML we're talking about looks like this (simplified for example):

<div id="uxReportViewer">
    <iframe id="ReportFrame_uxReportViewer">
        <html>
            <frameset id="frameset">
                <frame name="docmap" id="docmap" />
                <frame name="report" id="report">
                    <html>
                        <body class="r0">
                            <div id="oReportDiv">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td id="oReportCell" /> <!-- Goal -->
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </body>
                    </html>
                </frame>
            </frameset>
        </html>
    </iframe>
    <iframe id="PrintFrame_uxReportViewer" />
</div>

It's the <td id="oReportCell" /> element that I need to grab hold of.

This currently works in IE:

$('div#oReportDiv > table > tbody > tr > td#oReportCell',
    $('#uxReportViewer > iframe:eq(0)')
        .contents()
        .find('html')[0]
        .document
        .frames["report"]
        .document
);

But in FF, I can only get so far, not even into the scope I specified:

$('#uxReportViewer > iframe:eq(0)')
    .contents()
    .find('html')[0] // good through here
    .document;       // document is not defined

Instead of .document in FF, there is an ownerDocument and a parentNode attribute that are HTMLDocument types, but then I can't find the frames in the document.

Any ideas?

Thanks!

Solution

  • I beat my head against it for a while longer and found that this works in both IE8 and FF3.6:

    $('#oReportCell', 
    $('#uxReportViewer > iframe:eq(0)')
        .contents()
        .find('html')
        .contents()
        .find('frame[name=report]')[0]
        .contentWindow // supported by modern browsers
        .document
);

    It's not pretty, but works.