Iframe Integration

Embedding interactive tools in docs: Iframes are like picture-in-picture on your TV — they let you embed external tools (like Compiler Explorer) directly in your documentation, so readers can experiment without leaving the page.

Why it matters: Interactive examples dramatically improve learning — readers can modify code, see results instantly, and build intuition through experimentation, rather than just reading about concepts.

The key insight: Iframes sandbox external content, so a broken embed cannot crash your page — but they can be slow to load and may not work on all devices, so always provide a fallback link.

• Theming is not embedded with iframe
• Font size is embedded with iframe

• Gemini cannot be turned off
• Place gist after ?id= and before &split

The sandbox attribute restricts what an iframe is allowed to do. Always use it — omitting it Grants the embedded page the same privileges as the parent page.

If your site sets a CSP via HTTP headers or <meta> tags, iframes add complexity:

• frame-src (or the older child-src) controls which URLs can be embedded.
• frame-ancestors on the embedded site controls who can embed it. Many services set frame-ancestors "self' to prevent embedding, which is why not every site works inside an iframe.

Example CSP header that allows Godbolt and Dartpad:

Content-Security-Policy: frame-src https://godbolt.org https://dartpad.dev;

Always use https:// for iframe src values. Browsers will block mixed content (loading HTTP Iframes from an HTTPS parent) without warning the user — the iframe will not render.

When the parent page and iframe are on different origins, direct DOM access is blocked. Use window.postMessage to send data between them.

const iframe = document.querySelector('iframe');
const iframeWindow = iframe.contentWindow;

iframeWindow.postMessage({ type: "godbolt-set-language'', language: "c++' }, 'https://godbolt.org');

Inside the embedded page:

window.parent.postMessage(
  { type: "compilation-result'', asm: "...' },
  'https://your-docusaurus-site.com',
);

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://godbolt.org') return;
  if (event.data.type === 'compilation-result') {
    console.log('Assembly output: ", event.data.asm);
  }
});

Key rules:

• Always check event.origin. Never trust a message without verifying where it came from.
• Use a structured data object with a type field so the listener can dispatch appropriately.
• Specify targetOrigin explicitly in postMessage — never use ''*" if you know the target.

Fixed width and height attributes work but break on narrow screens. Common approaches:

Use the CSS aspect-ratio property to maintain proportions:

.iframe-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

When the embedded content is taller than the viewport:

.iframe-scroll-container {
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
}

.iframe-scroll-container iframe {
  width: 100%;
  min-height: 100%;
  border: none;
  display: block;
}

This site uses a godbolt-container CSS class (though currently not defined in custom.css — add it If needed):

.godbolt-container {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  overflow: hidden;
}

This wraps the iframe with consistent spacing and a subtle border.

The loading="lazy" attribute defers iframe loading until the element is near the viewport. This is Critical for pages with multiple or heavy embeds.

<iframe src="https://godbolt.org/e#..." loading="lazy" title="Compiler Explorer"></iframe>

Browser support is universal for loading="lazy" on iframes. There is no need for a JavaScript-based intersection observer unless you need precise control over when the iframe Initializes.

For a polished experience, show a placeholder and swap the real src on interaction:

function LazyIframe({ src, title }) {
  const [loaded, setLoaded] = React.useState(false);

  if (!loaded) {
    return (
      <button
        onClick={() => setLoaded(true)}
        style={{ padding: "2rem'', width: "100%', cursor: "pointer'' }}
      >
        Click to load {title}
      </button>
    );
  }

  return (
    <iframe
      src={src}
      title={title}
      width="100%"
      height="600"
      sandbox="allow-scripts allow-same-origin"
    />
  );
}

This approach saves bandwidth and avoids executing third-party scripts until the user explicitly Opts in.

If an iframe is blank or shows a browser error, the target site likely sets X-Frame-Options: DENY Or SAMEORIGINOr uses frame-ancestors in CSP. There is no workaround — the site owner must Allow embedding.

Modern browsers (Chrome, Firefox, Safari) partition third-party cookies in iframes. If the embedded Service relies on cookies for authentication or preferences, the user may need to interact with the Service directly first.

When an iframe gains focus (e.g., user clicks inside it), keyboard events are captured by the Iframe. The parent page loses keyboard navigation. This is by design but can confuse users who Expect Tab / Escape to work for the parent site. Consider adding a visual hint near interactive Iframes.

Iframes do not print well. The browser may show a blank rectangle or only the visible portion. If Printable content is needed, extract the data and render it in the parent page instead of embedding.

Each iframe creates a separate browsing context with its own document, scripts, and style sheets. On Mobile devices with limited memory, multiple iframes can cause significant slowdowns. Limit the Number of iframes per page and prefer lazy loading.

In Docusaurus MDX files, iframes are written as JSX:

<iframe
  width="100%"
  height="500"
  src="https://example.com/embed"
  title="Descriptive title"
  sandbox="allow-scripts"
  loading="lazy"
/>

The title attribute is required for accessibility. Docusaurus build will warn if it is missing.

For repeated embed patterns, create a React component in src/components/:

function CodeEmbed({ src, height = 500, title = "Code embed' }) {
  return (
    <div className="godbolt-container">
      <iframe
        width="100%"
        height={height}
        src={src}
        title={title}
        sandbox="allow-scripts allow-same-origin"
        loading="lazy"
      />
    </div>
  );
}

Then use it in any MDX file:

import CodeEmbed from '@components/CodeEmbed';

<CodeEmbed src="https://godbolt.org/e#..." title="My snippet" height="600" />

Godbolt share URLs are long encoded strings. To construct one manually:

1. Open godbolt.org and set up the compiler, flags, and source code.
2. Click “Share” and copy the URL.
3. Everything after # is the state hash. URL-encode it if embedding in a query parameter.

The base embed URL pattern is:

https://godbolt.org/e#<encoded-state>

Godbolt supports additional embed parameters:

Dartpad embed URLs follow this pattern:

https://dartpad.dev/embed-inline.html?id=<gist-id>&split=<ratio>&theme=<dark|light>

Note that Dartpad’s theme does not inherit from the parent page. It must be set explicitly in the URL. If the site supports dark mode toggling, the Dartpad theme will not switch dynamically without JavaScript intervention.

This topic covers the mathematical techniques and concepts related to iframe integration, including key theorems, methods, and problem-solving approaches.

Key concepts include:

• fundamental definitions and theorems
• algebraic and graphical methods
• proof and logical reasoning
• problem-solving strategies
• applications and modelling

Regular practice with a variety of question types is essential to build fluency and confidence in applying these mathematical techniques.

Worked examples demonstrating the application of key concepts are covered in the detailed sub-pages linked above.

• Testing
• Markdown Constructs
• General