jQuery access table inside a frame

2019-04-16 15:15发布

问题:

I've got a problem. I want to select an element inside a frame (not iframe). The name of the frame is main, but I can't add an ID (complicated to explain, but not possible). How can I manipulate the data inside that frame?

I already tried various different things (also from stackoverflow) but they didn't work...

dodo

frameset:

<frameset cols="*, 165" frameborder="0" framespacing="0" border="0">
    <frame frameborder="0" marginwidth="5" marginheight="5" border="0" src="game.php" name="main" />
    <frame frameborder="0" scrolling="no" noresize  marginwidth="7" marginheight="0" src="ad_sky.php" name="ad" />
</frameset>

jQuery code

$(document.createElement("tr"))
        .attr({ id: 'DMbalk' })
        .appendTo($('frame[name=main] #header_info tbody'));

I can't get it working on this way...

Code of game.php (main frame)...

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>dododedodonl</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/style.php?type=static_game&amp;stamm_new_menu&amp;sprites&amp;jquery.tooltip&amp;1279552567">
    <link rel="stylesheet" type="text/css" href="/style.php?type=game&amp;stamm_new_menu&amp;stamm&amp;overview&amp;1279552567">
            <script type="text/javascript" src="/js.php?jquery-1.4.2.min&amp;jquery-cookie&amp;jquery.form&amp;jquery.scrollTo&amp;jquery.tooltip.min&amp;jquery.fadeToggle.min&amp;jquery.blink.min&amp;jquery-ui-core.1.8.min&amp;jquery-ui-draggable.1.8.min&amp;UI&amp;Callback&amp;BBCodes&amp;dialogs&amp;observer&amp;ajax&amp;script&amp;menu&amp;1281000263"></script>
</head><body id="ds_body" marginwidth="5" marginheight="5">
    <div class="top_background"></div>
    <div style="text-align: center;">
        <table class="navi-border" style="width: 840px; border-collapse: collapse; margin:11px auto auto; text-align: left;">
            <tbody><tr>
                <td>
                    <table class="menu nowrap" width="840">
                        <tbody><tr id="menu_row">
                            <td><a href="/game.php?village=152743&amp;screen=&amp;action=logout&amp;h=4c26" target="_top">Uitloggen</a></td>
                            <td><a href="/forum.php" target="_blank">Forum</a></td>
                            <td><a href="/help2.php" target="_blank">Hulp</a></td>
                            <td><a href="/game.php?village=152743&amp;screen=settings">Instellingen</a></td>
                            <td><a href="/game.php?village=152743&amp;screen=premium">Premium</a></td>
                            <td><a href="/game.php?village=152743&amp;screen=ranking">Ranglijst</a> (5602.|162 P)</td>
                                                            <td><a href="/game.php?village=152743&amp;screen=ally">Stam</a></td>
                                                            <td><a href="/game.php?village=152743&amp;screen=report">Berichten</a></td>
                                                            <td><a href="/game.php?village=152743&amp;screen=mail">Mededelingen</a></td>
                                            <td><a href="/game.php?village=152743&amp;screen=buddies">Vrienden</a></td>                            </tr>
                    </tbody></table>
                </td>
            </tr>
        </tbody></table>
    </div>








    <hr width="840" size="2">

    <table id="header_info" align="center" width="840" cellspacing="0" style="padding:0;margin-bottom:4px">
        <tbody><tr>
            <td>
                <table class="navi-border" style="border-collapse: collapse;">
                    <tbody><tr>
                        <td>
                            <table class="menu nowrap" style="width:100%;">
                                <tbody><tr id="menu_row2">
                                    <td><a href="/game.php?village=152743&amp;screen=overview_villages" accesskey="s">Overzichten</a></td>
                                    <td>
                                                                                    <a href="/game.php?village=152743&amp;screen=map">Kaart</a>
                                                                                </td>

                                                <td style="white-space:normal;"><a href="/game.php?village=152743&amp;screen=overview">dododedodonl</a></td><td><b class="nowrap">(484|175) C14</b></td>
                                                                        </tr>
                            </tbody></table>
                        </td>
                    </tr>
                </tbody></table>
            </td>

            <td align="right">
                <table align="right" class="navi-border menu_block_right">
                    <tbody><tr>
                        <td>
                            <table class="box" cellspacing="0" style="empty-cells:show;">
                                <tbody><tr style="height: 20px;">
                                    <td class="icon-box"><a href="/game.php?village=152743&amp;screen=wood" title="Hout"><span class="icon header wood"> </span></a></td>
                                    <td><span id="wood" title="117" class="warn">1229</span>&nbsp;</td>
                                    <td class="icon-box"><a href="/game.php?village=152743&amp;screen=stone" title="Leem"><span class="icon header stone"> </span></a></td>
                                    <td><span id="stone" title="100" class="warn">1229</span>&nbsp;</td>
                                    <td class="icon-box"><a href="/game.php?village=152743&amp;screen=iron" title="IJzer"><span class="icon header iron"> </span></a></td>
                                    <td><span id="iron" title="100" class="warn">1229</span>&nbsp;</td>
                                    <td style="border-left: dotted 1px;"></td>
                                    <td class="icon-box"><a href="/game.php?village=152743&amp;screen=storage" title="Capaciteit opslagplaats"><span class="icon header ressources"> </span></a></td>
                                    <td id="storage">1229</td>
                                </tr>
                            </tbody></table>
                        </td>
                    </tr>
                </tbody></table>
            </td>

            <td align="center">
                <table class="navi-border menu_block_right">
                    <tbody><tr>
                        <td>
                            <table class="box" cellspacing="0" style="margin:0;padding:0;">
                                <tbody><tr style="margin:0;padding:0;">
                                    <td class="icon-box"><a href="/game.php?village=152743&amp;screen=farm"><span class="icon header population"> </span></a></td>
                                    <td align="center" style="margin:0;padding:0;"><span id="pop_current">126</span>/<span id="pop_max">386</span></td>
                                </tr>
                            </tbody></table>
                        </td>
                    </tr>
                </tbody></table>
            </td>



                    </tr>
        <!-- add a TR here -->
    </tbody></table>

    <!-- other html stuff -->
</body></html>

Ow, I forgot to say, it is a safari extension...

回答1:

What happens when your jQuery code looks like this:

$(document.createElement("tr"))
        .attr({ id: 'DMbalk' })
        .appendTo($('#header_info tbody', window.frames[0].document));

The second parameter to the jQuery function ($) is the context in which the selection runs, which by default is the current document. Specifying the second parameter shifts the context for the selector to the first frame.

The jQuery API docs:

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function

A similar SO question was asked here: Run JQuery in the context of another frame

Hopefully this helps!

EDIT: OK, hopefully this is the answer. What I found was that the jQuery was firing before the frames were loaded; as a result, I was getting an error saying that the frame "main" could not be found. So I added a setTimeout (of 2 seconds) to the startup script and I can see the <tr> being created. Here's the HTML that I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        setTimeout(AddRow, 2000);

        function AddRow() {
            $(document.createElement("tr"))
                .attr({ id: 'DMbalk' })
                .appendTo($('#header_info tbody', window.frames["main"].document));
        }
    </script>
</head>
    <frameset cols="*, 165" frameborder="0" framespacing="0" border="0">
        <frame frameborder="0" marginwidth="5" marginheight="5" border="0" src="game.htm" name="main" />
        <frame frameborder="0" scrolling="no" noresize  marginwidth="7" marginheight="0" src="test2.htm" name="ad" />
    </frameset>
</html>

The frames load to static HTML files (I'm not a PHP person, so I went with static HTML). Before I added the setTimeout call in, the frames would load, no new <tr> would be created, and I would see a JavaScript error. I added the setTimeout in and now things work fine. I also had to change how I reference the frame -- using the index didn't seem to work, but referencing it by name works fine. Not sure why that is.

So hopefully this helps. Let me know if you're still having issues and I'll try again. :) Good luck!



回答2:

You can select using attributes as well: $("frame[name=main]")



回答3:

If you have only one frame, use index 0 and put jquery inside frame

window.frames[0].$("#test");