Consistent & Reliable iFrame Embed & Autosize

[wesleyboar]

Embedding iframe on a page has problems.

Known Clients

• AMI
• CTRN
  ^{"planning to embed [on page among other elements]"}

Problems

• 1: Full-Width IFrame Limitations
• 2: Title Appearance is Inconsistent

1: Full-Width IFrame Limitations

The "Standard" CMS Template is not for full-width content. It reduces and quantizes width of page content. The iframe is too narrow.

Solutions

• Solution 1.1: Create New CMS template
• Solution 1.2: Use CMS Template "Full Width"
• Solution 1.3: Use JavaScript

1.1: Create New CMS template

Create a new CMS template "Standard (with iFrame)".

Tip

Add to TACC/Core-CMS/:main/taccsite_cms/templates. Reference:

• basic (standard)
• custom (fullwidth)
• advanced (djangocms_blog/base)

1.2: Use CMS Template "Full Width"

Warning

Page will not have breadcrumbs.

1.3: Use JavaScript

We have temporary, dynamic solutions with JavaScript.

Note

Examples:

• AMI: /explorer/ami-data-explorer/
• AMI: /explorer/antero-data-explorer/

---

2: Title Appearance is Inconsistent

Embedded graphs have title, rather than letting the page set the only title. Title in the iFrame does not match CMS design. Hide the title in the context of an iFrame.

Solutions

• Solution 2.0: "Just Delete the Title"
• Solution 2.1: "Separation of Concerns" JavaScript & CSS
• Solution 2.2: "One Language for the Luddite" JavaScript
• Solution 2.3: "I Wanna Learn the Future" CSS & JavaScript

2.0: "Just Delete the Title"

Just do not add the title in the app to begin with.

Note

• Requested of CTRN on 2025-04-07 (internal chat)
• Requested of AMI on 2025-04-07 (private chat)

2.1: "Separation of Concerns" JavaScript & CSS

// JS
document.addEventListener("DOMContentLoaded", function () {
    if (window.self === window.top) {
        document.documentElement.classList.add('is-standalone');
    }
});

html:not(.is-standalone) h1 {
    display: none;
}

2.2: "One Language for the Luddite" JavaScript

document.addEventListener("DOMContentLoaded", function () {
    if (window.self !== window.top) {
        // Page is in an iframe
        document.getElementById("yourElementID").style.display = "block";
    } else {
        // Page is not in an iframe
        document.getElementById("yourElementID").style.display = "none";
    }
});

2.3: "I Wanna Learn the Future" CSS & JavaScript

@media all and (display-mode: browser) {
    #yourElement { display: none; }
}

And learn display-mode and how to implement it (JavaScript).