Ghost in the Iframe

Skip the haunted house this year. You can spook a room full of designers and engineers with just one word. Turn down the lights and slowly creak out frameset. Goose bumps, right?

And to really terrify them, follow it up with same-origin policy. Don’t get the joke? I’ll explain.

Inline frames enable you to present content from different sources as a single document. However, because of the same-origin policy, that’s about all you can do. Interactivity between cross-domain elements is extremely limited.

For a parent page hosted at X.com with iframe content from Y.com, there isn’t an easy way to manipulate the iframe’s DOM. Want to scroll the iframe from the parent page? Sorry, no dice. You’ll have to focus on it with your mouse to scroll, and that’s not always practical from a UI standpoint.

Fortunately, xframe.js overcomes some of these contraints. Created by Sho Hashimoto, xframes enable you to scroll through cross-domain iframes with JavaScript. Once again, UI design is your prerogative.

Here’s a demo, although implementation is quite straightforward:

```html

```

Granted, there are more powerful ways (easyXDM & postMessage) to enable cross-domain interaction, but in this case xframe.js requires less code. That’s a trick and a treat—Happy Halloween!

Join the discussion

2017 Neal Shyam