website-v2/templates/docsiframe.html

{% extends "base.html" %}

{% block content %}
    <iframe
        srcdoc="{{ content }}"
        onload="iframeCustomizations(this)"
        id="docsiframe"
    ></iframe>
    <script>
      function iframeCustomizations(iframe) {
        let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        {#resizeIframe(iframe);#}
        addClickInterception(iframeDoc);
        addBase(iframeDoc);
        if (window.location.hash) {
           scrollToAnchor(iframeDoc, window.location.hash.slice(1));
        }
      }

      function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
      }

      function scrollToAnchor(iframeDoc, hash) {
        const targetElement = iframeDoc.getElementById(hash);
        if (targetElement) {
          targetElement.scrollIntoView({behavior: 'smooth'});
        }
      }

      function addClickInterception(iframeDoc) {
        let anchorLinks = iframeDoc.querySelectorAll('a[href*="#"]');
        anchorLinks.forEach(function (anchor) {
          anchor.addEventListener('click', function (event) {
            const href = this.getAttribute('href');
            const hrefSplit = href.split('#');
            event.preventDefault();
            {# here we account for anchors on different pages #}
            if (!window.location.href.endsWith(hrefSplit[0])) {
              window.location.href = href;
            }
            scrollToAnchor(iframeDoc, hrefSplit[1]);
          });
        });
      }

      function addBase(iframeDoc) {
        let base = iframeDoc.createElement('base');
        base.setAttribute('target', "_parent"); // Set to an appropriate base URL
        let head = iframeDoc.getElementsByTagName('head')[0];
        if (head) {
          head.insertBefore(base, head.firstChild);
        } else {
          head = iframeDoc.createElement('head');
          iframeDoc.documentElement.insertBefore(head, iframeDoc.body);
          head.appendChild(base);
        }
      }
    </script>
{% endblock %}