📖
PixieBrix Documentation
🖼️

Editing pages with iframes

ℹ️
This page is about editing pages with iframes. For information on the PixieBrix IFrame brick, see the Marketplace

Inline Frames

An iframe (inline frame) is used to embed a document inside the current document. The embedded document can be from the same site, or a different site.

Framed document are separate/distinct from the top-level tab. A separate “instance” of PixieBrix runs in each iframe.

The Page Editor works on the top-level frame of the tab. It cannot directly select/modify elements in the document embedded within an iframe.

In selection/placement mode, when part of the page is an iframe, PixieBrix will highlight the whole iframe on hover because to the Page Editor, the iframe is a single element:

The Page Editor element selector over an iframe:

Editing a Framed Page

IFrames are distinct documents. To edit a document in an iframe with PixieBrix, you’ll edit the document and not the containing tab.

To extend a framed document with PixieBrix, you have two options:

  1. Preferred: Open the framed document in its own tab and use the Page Editor
  2. Use the Page Editor on the top-level tab, and manually write element selectors

Find the URL of the iframe

  1. Use the Chrome Dev Tools element selector
    2. image
  2. Select an element within the frame
  3. Find the iframe ancestor element. It will have tag <iframe> and show a #document sub node:
    4. image
  4. Right click the src attribute value and click “Copy link address”. This will copy a link address to the clipboard (including the origin if the src attribute does not already include it)
    5. image

Opening the Framed Document in its Own Tab

ℹ️
Not all framed pages can be opened in their own tab. Some documents are configured to re-direct if they detect they’re not running inside a frame
  1. Find the URL of the iframe (see above)
  2. Open a new tab and navigate to the document URL
  3. Open the Page Editor and edit the page as usual

Editing from the Top-Level Tab

ℹ️
The Page Editor dynamically updates mods on the top-level tab. To run an updated mod in the iframed documents, you must Save the mod.
  1. Find the URL of the iframe (see above)
  2. Add the mod in the Page Editor
  3. Modify the “Sites” to match the source of the framed document
  4. Build the mod as normal, but manually write elements selectors. (Because the Page Editor cannot select elements in iframes)
  5. Save the Mod
  6. Right click on the frame and select “Reload Frame” from the Chrome context menu:
    7. image
  7. Your Mod will run inside the framed document

Cross-frame Communication

🚧
PixieBrix does not currently support cross-frame communication on the same tab. To coordinate across frames you must use APIs or PixieBrix’s
🐘
Team Databases

Coming Soon!

Twitter