Hello.

I created a simple bookmarklet for quickly enabling Picture-in-Picture mode for videos, even on sites that disable it. Drag the "Quick PIP" bookmarklet link to your bookmarks bar. When clicked, it activates PIP for the first actively playing video on the page or in any same-origin iframe. The bookmarklet's code is concise and avoids polluting the global scope. It efficiently finds the first playing video and requests Picture-in-Picture mode.

I explored the concept of "magic iframes" and using adoptNode to move iframes between windows. Initially, I thought I'd found a way to preserve iframe state during the move. However, after discussing with Jake Archibald, it turns out that appendChild already handles node adoption, making adoptNode redundant. Furthermore, moving iframes causes them to reload, negating the perceived benefit. While moving DOM elements between documents is still interesting, the original premise for iframes doesn't hold. The post includes a demo and discusses the potential of the <portal> API.

This post discusses how to use window.name for cross-domain communication between windows/iframes, especially before the onload event. It explains a simple method using window.open to set the name and retrieve it in the opened window. It also addresses IE compatibility issues by base64 encoding/decoding the data and provides code snippets for both encoding and decoding, handling IE's character restrictions and lack of built-in base64 functions.

WebMessaging (postMessage) seems simple but has quirks. Different browsers handle data differently (structured clones vs. strings). The biggest problem is sending messages to a newly opened window/iframe. You can't just send a message immediately; you have to wait for the window to load and signal back. This adds complexity, requiring the new window to postMessage back to the opener, which then sends the actual data. A workaround involves passing data via window.name, but this has security implications as the data's origin is uncertain and the name persists, potentially exposing data.

I've updated my AJAX application, DeliTag (The Delicious Tag Poster)! Now, when you select text within the IFRAME, the application will analyze only the selected text instead of the entire page. This makes tagging much more precise.