Set title of window from iframe (#183)

site_template/app/index.html

@@ -23,6 +23,10 @@
           allowCodeUrl: true,
           allowGistUrl: true,
           allowExampleUrl: true,
+          setWindowTitle: {
+            prefix: "",
+            defaultTitle: document.title,
+          },
         },
         "{{APP_ENGINE}}",
       );

site_template/editor/index.html

@@ -26,6 +26,10 @@
         // viewer embedded in a larger page, it does not make sense to set
         // this to true.
         updateUrlHashOnRerun: true,
+        setWindowTitle: {
+          prefix: "Shiny - ",
+          defaultTitle: document.title,
+        },
       };
 
       const appRoot = document.getElementById("root");

src/Components/App.tsx

@@ -110,6 +110,17 @@ type AppOptions = {
   // When the app is re-run from the Editor, should the URL hash be updated with
   // the encoded version of the app?
   updateUrlHashOnRerun?: boolean;
+
+  // Set window title based on the application iframe's title? If this is
+  // not false, then the title from the Viewer iframe will be applied to the
+  // window, with the prefix prepended. If the Viewer iframe's title is empty,
+  // then the default title will be used instead.
+  setWindowTitle?:
+    | {
+        prefix: string;
+        defaultTitle: string;
+      }
+    | false;
 };
 
 export type ProxyHandle = PyodideProxyHandle | WebRProxyHandle;
@@ -420,6 +431,7 @@ export function App({
             proxyHandle={proxyHandle}
             setViewerMethods={setViewerMethods}
             devMode={true}
+            setWindowTitle={appOptions.setWindowTitle}
           />
         </ResizableGrid>
       </>
@@ -470,6 +482,7 @@ export function App({
             proxyHandle={proxyHandle}
             setViewerMethods={setViewerMethods}
             devMode={true}
+            setWindowTitle={appOptions.setWindowTitle}
           />
         </ResizableGrid>
       </>
@@ -574,6 +587,7 @@ export function App({
           proxyHandle={proxyHandle}
           setViewerMethods={setViewerMethods}
           devMode={true}
+          setWindowTitle={appOptions.setWindowTitle}
         />
       </ResizableGrid>
     );
@@ -596,6 +610,7 @@ export function App({
             proxyHandle={proxyHandle}
             setViewerMethods={setViewerMethods}
             devMode={false}
+            setWindowTitle={appOptions.setWindowTitle}
           />
         </div>
       </>

src/Components/Viewer.tsx

@@ -127,10 +127,17 @@ export function Viewer({
   proxyHandle,
   setViewerMethods,
   devMode = false,
+  setWindowTitle = false,
 }: {
   proxyHandle: ProxyHandle;
   setViewerMethods: React.Dispatch<React.SetStateAction<ViewerMethods>>;
   devMode?: boolean;
+  setWindowTitle?:
+    | {
+        prefix: string;
+        defaultTitle: string;
+      }
+    | false;
 }) {
   const viewerFrameRef = React.useRef<HTMLIFrameElement>(null);
   const [appRunningState, setAppRunningState] = React.useState<
@@ -141,6 +148,38 @@ export function Viewer({
     null,
   );
 
+  // Add effect to monitor iframe title changes
+  React.useEffect(() => {
+    if (!setWindowTitle || !viewerFrameRef.current) return;
+
+    const iframe = viewerFrameRef.current;
+    const observer = new MutationObserver(() => {
+      if (iframe.contentDocument?.title) {
+        document.title = setWindowTitle.prefix + iframe.contentDocument.title;
+      } else {
+        document.title = setWindowTitle.defaultTitle;
+      }
+    });
+
+    // Start observing once the iframe loads
+    const onLoad = () => {
+      if (iframe.contentDocument) {
+        observer.observe(iframe.contentDocument, {
+          subtree: true,
+          childList: true,
+          characterData: true,
+        });
+      }
+    };
+
+    iframe.addEventListener("load", onLoad);
+
+    return () => {
+      observer.disconnect();
+      iframe.removeEventListener("load", onLoad);
+    };
+  }, [setWindowTitle]);
+
   // Shiny for R
   React.useEffect(() => {
     if (!proxyHandle.shinyReady) return;