A fictional notice-review tool puts a short notice in an iframe beside an application toolbar. The reviewer needs to try different wording in the notice while keeping the toolbar labels intact. An editable document gives this small scratch space its own boundary; it is not a complete publishing or rich-text editing system.
Enable the frame's document after each load
This example uses a fixed, trusted srcdoc notice:
<button id="edit-notice" type="button">Enable notice editing</button>
<button id="finish-notice" type="button">Finish editing and read text</button>
<iframe id="notice" title="Notice wording scratch space"
srcdoc="<!doctype html><html lang='en'><meta charset='utf-8'><body><h1>Workshop notice</h1><p>The room opens at nine.</p></body></html>">
</iframe>
<pre id="notice-text" aria-label="Current notice text"></pre>
const frame = document.querySelector('#notice');
const output = document.querySelector('#notice-text');
let editing = false;
function applyMode() {
const doc = frame.contentDocument;
if (!doc?.body) return;
doc.designMode = editing ? 'on' : 'off';
}
frame.addEventListener('load', applyMode);
applyMode();
document.querySelector('#edit-notice').addEventListener('click', () => {
editing = true;
applyMode();
frame.contentWindow.focus();
});
document.querySelector('#finish-notice').addEventListener('click', () => {
const doc = frame.contentDocument;
if (!doc?.body) return;
editing = false;
applyMode();
output.textContent = doc.body.innerText;
});
The load listener reapplies the selected mode when the frame gets a new document. The immediate call also handles a document that has already loaded. Replacing srcdoc later replaces the notice itself, so read or save wanted edits before doing that.
The Document.designMode reference specifies string values "on" and "off". A Boolean assignment such as designMode = true is not the documented way to enable it.
Keep the editing boundary separate from the application
document.designMode = 'on' affects the document where that statement runs. In the application shell, that is the outer document. Use the frame's own contentDocument for the notice.
For a single caption or table cell, contenteditable gives a narrower editing surface. It is usually easier to give one element a label and editing style than to turn a whole application page into an editor. Choose document mode when the document boundary is the useful part of the design.
The parent can access the frame document only when the browser's same-origin rules allow it. A cross-origin page does not become editable by the parent merely because it appears in an iframe. Sandboxing can also change that relationship. The iframe reference explains these restrictions.
Keep this example's fixed trusted content boundary. Do not put arbitrary uploaded or pasted HTML into an unsandboxed same-origin srcdoc frame. Editable HTML and iframe isolation require a deliberate security design when the source is untrusted; enabling designMode supplies no sanitization.
Read the result that the next step actually needs
The Finish button above turns editing off and copies visible notice text into a plain-text output. It uses textContent to display that text, so words that resemble tags remain words. The output is still an in-memory preview and disappears on reload.
If the application needs formatted content, doc.body.innerHTML reads body markup instead, but it is not a complete original-document export. It does not include the head or preserve the original source formatting. Treat that HTML as editable content and validate and sanitize it for the actual storage and rendering path.
Turning editing off does not restore the original notice or persist the new one. It changes whether the browser allows further document editing. Keep saving and its success message in the application's real storage workflow.
Check the notice and the shell separately
Enable editing, place the caret in the notice, and change "nine" to "ten." Finish editing and confirm that the output shows "ten" while the application button labels remain unchanged. Re-enable editing and check that the revised notice is still present in the same document.
Reload the frame only after deciding what should happen to unsaved wording. A newly loaded document has its own content and editing mode; a successful text edit before navigation says nothing about what survives it. Finish the review by moving the accepted wording into the actual notice record, then reopen that saved record to read it in context.