Generate iframe source in template?

support
1

I am trying to generate an iframe that displays sandboxed HTML & CSS for a teaching site. I have a partial rendered.html that looks like this:

<html>
<head>
    <link src='{{path.Join .File.Dir "style.css"}}'/>
    <script src='{{path.Join .File.Dir "script.js" }}' ></script>
</head>

<body>
    {{path.Join .File.Dir "body.html"  | readFile }}
    
</body>

I then call that in the single.html template for the relevant content section:

{{ define "main" }}
<div class="lesson-container">
  <div class="md">
                <div class="student-instructions">
                    {{path.Join .File.Dir "instructions.md" | readFile | markdownify}}</div>

            </div>
            <div id="tab-two-panel" class="panel">
                <div class="teacher-instructions">
                    {{path.Join .File.Dir "teacher.md" | readFile | markdownify}}</div>
                
            </div>
        </div>

    </div>

</div>
<div class="render">
    <iframe srcdoc=' {{partial "rendered.html" . | safeHTML }}'></iframe>

</div>
</div>
{{ end }}

However, the iframe source only contains the <body> element - -the <head> and <html> tags seem ot be stripped out. If i invoke the shortcode outside of the iframe srcdoc attribute then the full value of the partial is expressed. Sooo… I’m not exactly sure what’s going on, but I’m pretty sure the partial is being intercepted before it completes.

I would really appreciate any suggestions! Thank you,

Matt

2

Can you share your full project?

3

Yes, thank you. It’s up on gh-pages here:
https://code-at-the-edge.github.io/curriculum-materials/courses/intro-workshop/01-html/

and the source is here:
https://github.com/code-at-the-edge/curriculum-materials/tree/hugo-version/layouts

I have sort of fixed the issue by encoding the source document as a data-url (yay!). This may actually b ethe best way to solve the problem? However I’m really feeling the effects of working against Hugo’s intentions. I am a bit stuck right now on a related problem, in which I have markdown files that I’m loading into a div via

 {{path.Join .File.Dir "instructions.md" | readFile | markdownify }}

Unfortunately this method means I can’t use Hugo template tags in the subsidiary file… I feel like I am in general going about this process a bit wrong-headed, but the idea is to use Hugo just as a tool for developing curriculum, so we’re trying not to disturb the original content too much.

Thanks for your help!

4

Try it this way.

In layouts/courses/single.html, instead of this:

<iframe src="data:text/html;charset=utf-8;base64,{{- partial "rendered.html" . | base64Encode }}"></iframe>

Do this:

{{ partial "rendered.html" . }}

Then in layouts/partials/rendered.html, wrap the partial in <iframe> tags