Body: <p>I'm trying to build an interactive ebook as a single page application. Everything works fine till now, except that I couldn't find a way to create a dynamic table of contents.</p>
  
  <p>My initial idea was to use the same file and specify a different hash for each chapter, like this:</p>
  
  <pre><code>&lt;nav epub:type="toc"&gt;
      &lt;ol&gt;
          &lt;li&gt;&lt;a href="page.xhtml#chapter1"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page.xhtml#chapter2"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Inside <code>page.xhtml</code> I have 2 anchors with id <em>chapter1</em> and <em>chapter2</em>. Clicking on the chapters from the TOC will jump to the correct anchor.</p>
  
  <p>But the JavaScript code inside <code>page.xhtml</code> cannot get the fragment information from <code>window.location</code> how I expect it. This is what I get with Calibre Viewer:</p>
  
  <pre><code>{
    "origin": "https://calibre-internal.invalid",
    "hash": "",
    "href": "https://calibre-internal.invalid/OEBPS/page.xhtml",
    "pathname": "/OEBPS/page.xhtml",
    "ancestorOrigins": {
      "length": 0
    },
    "hostname": "calibre-internal.invalid",
    "protocol": "https:",
    "port": "",
    "host": "calibre-internal.invalid",
    "search": ""
  }
  </code></pre>
  
  <p>I don't know why the host is <code>calibre-internal.invalid</code>, that would also be interesting to fix.</p>
  
  <p>You can find the sample project at this location:
  <a href="https://github.com/kenjiru/epub-location-test" rel="nofollow noreferrer">https://github.com/kenjiru/epub-location-test</a></p>
  
  <p>Here's a sample epub file:
  <a href="https://github.com/kenjiru/epub-location-test/files/1307404/sample.epub.zip" rel="nofollow noreferrer">https://github.com/kenjiru/epub-location-test/files/1307404/sample.epub.zip</a></p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-16T13:31:51.240Z
Comments.Text: I'm not sure I understand what your goal for using JS is. FYI, the file validates and renders fine in Adobe DE for Windows. The navigation works fine too. (nothing in epub spec forbids you from using anchors in a single file as the TOC items).
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-16T13:44:16.470Z
Comments.Text: In Adobe DE, the js output is more normal: localhost, port 5001, http. One more thing. You probably already know this, but single HTML file ebooks can take a long while to load on some reading systems.
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-16T13:45:43.033Z
Comments.Text: For what it's worth, if your goal is to hide/expand navigation items, the book EPUB3 Best Practices by Matt Garrish and Markus Gylling has some nice examples using javascript
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-20T10:43:26.610Z
Comments.Text: I want to have a dynamic TOC, where each entry is a different fragment. I want to read this fragment in the JavaScript code and display a different chapter of the book. This way I avoid loading a new html page for each chapter.
Comments.UserDisplayName: kenjiru
Tags: <epub><editing><metadata>
Title: How to get the fragment name with JavaScript
UserDisplayName: kenjiru
ThreadText: # How to get the fragment name with JavaScript
  
  (Asked by: username_0 on 2017-09-15)
  
  I'm trying to build an interactive ebook as a single page application. Everything works fine till now, except that I couldn't find a way to create a dynamic table of contents.
  My initial idea was to use the same file and specify a different hash for each chapter, like this:
  
      
          Chapter 1
          Chapter 2
      
  
  
  Inside page.xhtml I have 2 anchors with id chapter1 and chapter2. Clicking on the chapters from the TOC will jump to the correct anchor.
  But the JavaScript code inside page.xhtml cannot get the fragment information from window.location how I expect it. This is what I get with Calibre Viewer:
  {
    "origin": "https://calibre-internal.invalid",
    "hash": "",
    "href": "https://calibre-internal.invalid/OEBPS/page.xhtml",
    "pathname": "/OEBPS/page.xhtml",
    "ancestorOrigins": {
      "length": 0
    },
    "hostname": "calibre-internal.invalid",
    "protocol": "https:",
    "port": "",
    "host": "calibre-internal.invalid",
    "search": ""
  }
  
  I don't know why the host is calibre-internal.invalid, that would also be interesting to fix.
  You can find the sample project at this location:
  https://github.com/username_0/epub-location-test
  Here's a sample epub file:
  https://github.com/username_0/epub-location-test/files/1307404/sample.epub.zip
  
  **Tags:** epub, editing, metadata
  
  > **Comments:**
  > **username_1**: I'm not sure I understand what your goal for using JS is. FYI, the file validates and renders fine in Adobe DE for Windows. The navigation works fine too. (nothing in epub spec forbids you from using anchors in a single file as the TOC items).  
  > **username_1**: In Adobe DE, the js output is more normal: localhost, port 5001, http. One more thing. You probably already know this, but single HTML file ebooks can take a long while to load on some reading systems.  
  > **username_1**: For what it's worth, if your goal is to hide/expand navigation items, the book EPUB3 Best Practices by Matt Garrish and Markus Gylling has some nice examples using javascript  
  > **username_0**: I want to have a dynamic TOC, where each entry is a different fragment. I want to read this fragment in the JavaScript code and display a different chapter of the book. This way I avoid loading a new html page for each chapter.  
  
  ---
  
  ## 0 answers
  
  