2

I have a one-page LMS site that utilizes 'table of contents'-style navigation, where anchors are used to load sections as clicked. I want to embed some H5P content types that have their own anchor-based navigation, specifically interactive books. If I embed through an iframe, the parent window's anchor fragment is overwritten by the subframe's (say, the next page in the H5P book), and the section crashes.

Manually appending the site URL with the original fragment as a string works, ie #section-1&, and I'm at a loss on how to prevent the book anchor from not only overriding the parent URL, but also tack on to its end, particularly as an automated process across the site (in case there are multiple books).

I know having multiple hashes in a URL isn't ideal. I'm sure there's a JQuery fix for this, but my knowledge is limited on how to even approach researching. Apologies if it's a simple fact that I should understand by now.

jqueryHtmlCSS
  • 1,587
  • 2
  • 12
  • 20
Justine
  • 47
  • 6
  • Can you show some code? Is this runnable snippet helpful? https://stackoverflow.com/a/55085905/3825777 Is any of this helpful? https://stackoverflow.com/questions/5928435/append-remove-anchor-name-from-current-url-without-refresh or https://stackoverflow.com/questions/2805742/how-to-update-append-to-an-href-in-jquery – jqueryHtmlCSS Dec 18 '20 at 20:12
  • If I understand you correctly, you are not running H5P on your platform but you are embedding it from a different server. Is that other server your's? If no, you could use something like ``` top.addEventListener('hashchange', (event) => { // your code }); ``` to detect changes to the URL and e.g. re-append your section's URL fragment. You will probably want to filter for callers and need to take care of loops because H5P Interactive Book also listens to hash changes and triggers hash changes). If yes, please leave a note :-) – Oliver Tacke Dec 27 '20 at 13:14

0 Answers0