Change tab title (document title)

Community Help
1

Hi,
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?

2

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.

(Source)

3

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.

4

Maybe useful for embedded notebooks?

5

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

6

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.

7

I ran into this need too, so here’s my answer to “why”: I have a notebook which lets the user bookmark its current state. To make it easier to tell multiple bookmarks apart, I made the notebook’s title (its first cell) also editable by the user. However, the window title is still set to the same initial value, which means that even if you give your view of my notebook a name,

  • You can’t search for that name in across your tab titles
  • You can’t search for that name across your browser history
  • The default bookmark name is the default notebook title, rather than your custom bookmark title.

(And yes, I realize that if the user forks and edits my notebook they set their own title, but that’s too much friction for this use case.)

You can see an example here, which is a bookmark to my notebook with pre-filled data and custom title, and you can see the notebook title is not reflected in the window title.

For this use case, I would be perfectly fine if Observable noticed the title changed in my notebook and updated the window title accordingly.

1 Like
8

Just wanted to add to the use-cases for being able to set the title programmatically. But also report some unexpected behaviour (bug?).

In my case, which is related to @airbornemint 's, I am happy for the title to be determined by the name of the heading at the top of the page. I have a small js function that creates that heading in the form of some navigation breadcrumbs and title, similar to that used in the Input element pages.

As a simplified example, that function could be

titleFn = (title) => md`Some breadcrumbs here > ${title}
# ${title}`

If I create a page with titleFn("My fancy title") at the top, the page appears as ‘untitled’. However, if I add a new markdown cell to the top of the page and give it some temporary title in the normal way, and then delete the code block, the titleFn call then correctly sets the page title. Subsequent changes to titleFn's argument correctly updates the title.

So this would appear to give a workaround for the problem to some extent, but it does seem slightly odd to have to create a temporary title and then delete it first for this to work.