🏠 back to Observable

Change tab title (document title)

I am looking for a way to change the tab title. ObservableHQ currently shows the title of the notebook, but would be great to be able to modify it with JS.

The old fashion “window.document.title = ‘my new title’” is just not working.

Any suggestion?

I’m afraid you’re out of luck. The actual notebook code runs inside a sandboxed iframe that cannot alter its parent page in any way.

To quote @tom:

Yep, Observable runs user JavaScript code, but that code has no access to your login credentials or anything from the ‘application’: user code runs in a sandboxed iframe on a separate host - host that doesn’t have any cookies or user information. The application communicates with that iframe host through serialized postMessage information only. That’s the gist of the ‘user code’ portion - the rest of the application has additional layers of best-practice security like very strict content security policies and so on that defend from other kinds of attacks.


There’s not currently a way to do this.

But we would like to understand why you would want to do this. It might be something we could add support for if there is a compelling use case.

Maybe useful for embedded notebooks?

Does it mean that it’s impossible to make a DOM element with position: absolute be visible outside iframe?

Correct. Notebooks are only allowed to draw in the main column of the page (underneath the editor interface). However, if you are embedding your notebook, you can display it however you like.