IFrame Specific Tweaks

• Authors: @vincent @danb
• Created: 20th Mar 2023
• Updated: 22nd Apr 2024
• Last Tested On: v24.02.3

This hack will add custom styles & scripts, hiding many parts of the interface while adding additional light/dark mode control, intended to provide a cleaner view that’s suitable for use within iframes embedded on external pages.

This can be useful if you use BookStack as a knowledge base, and you want to integrate contextual help for your app, with content from BookStack.

Considerations

• The forced dark/light mode control works via JavaScript, so will not run where a user has JavaScript disabled although this is relatively rare.
• This specific example will only affect the loaded page view, not subsequent clicks to other parts of the application within the iframe.

Usage

Use the original page url, with the GET query params iframe=true and theme=dark|light. For example:

1

<iframe src="https://docs.example.com/books/my-book/page/my-page?iframe=true&theme=dark"></iframe>

The styles and script logic provided is just an example starting point. You should customize these to suit your own needs.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!-- Check if there's a "iframe=true" query parameter in the request -->
@if(request()->query('iframe') === 'true')

    <!-- Set styles for when we're in "iframe mode" -->
    <!-- Most of these hide elements to provide a simple "embedded view" -->
    <style>
        #header,
        #sidebar,
        #content .button,
        .tri-layout-right,
        .grid.third.gap-xxl,
        .comments-container,
        #main-content > .mb-m,
        .tri-layout-mobile-tabs
        {
            display: none
        }

        .content-wrap.card
        {
            margin: 0;
            border: none;
            box-shadow: none;
        }
    </style>

    <!-- Add a script to control dark-mode via JavaScript -->
    <!-- if there's also a 'theme' query parameter -->
    @if(request()->query('theme'))
        <script nonce="{{ $cspNonce }}">
            // Use JavaScript to toggle the 'dark-mode' class on the HTML element to enable/disable
            // dark mode based on whether the `theme` query parameter is 'dark'.
            document.documentElement.classList.toggle('dark-mode', {{ request()->query('theme') === 'dark' ? 'true' : 'false' }});
        </script>
    @endif
@endif