Question

I’m writing a bookmarklet which needs to work in the context of pages whose design I don’t control. Some of the pages I need the bookmarklet to function in use frames (in framesets). Is it possible for a jQuery-UI dialog to work inside a frame?

Currently, when I encounter a page with a frameset, I creating my dialog like this:

var frame = window.frames[0];
var div = $(frame.document.createElement("div"));
div.html("My popup contents");
div.dialog( ... );

The result is that jQuery appends the ui-widget div to the main document, rather than the frame’s document. Since the main document is just a frameset, nothing is displayed. I can’t find any options in the jquery-ui API to specify which document the widgets should be constructed in. The bookmarklet will necessarily be running (or at least starting) from within the context of the outer document.

I’m aware that it won’t be possible to display an overlay over the frames; I’m comfortable with display just in a single frame. Also, some other notable bookmarklets fail to function on pages with framesets, so this may be a common problem.

Suggestions?

Answer 1

Here’s what I ended up doing: rather than attempting to display within or over a frame, I just had the bookmarklet rewrite the page to remove the framesets and add my own body and content to the page. This allows the bookmarklet to still introspect the frames and get data that it needs from them to construct the overlay prior to removing the framesets, but allows the overlay to still work.

Something like this:

if (window.frames) {
    for (var i = 0; i < window.frames.length; i++) {
        // ... grab data from the frame ...
    }
}

if ($("frameset")) {
    $("html").children("frameset").remove();
    document.body = document.createElement("body");
    $("html").append(document.body);
    // ... add my stuff to body ...
}