# Generate iframe source in template?

**URL:** <https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654>\
**Category:** support\
**Created:** [December 4, 2018, 4:30am UTC](https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654 "2018-12-04T04:30:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![titaniumbones](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/titaniumbones/32/3601_2.png) [@titaniumbones](https://discourse.gohugo.io/u/titaniumbones)\
**Post date:** [December 4, 2018, 4:30am UTC](https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654/1 "2018-12-04T04:30:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [December 4, 2018, 4:45am UTC](https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654/2 "2018-12-04T04:45:53Z")

</div>

Can you share your full project?

---

<div class="post-metadata">

**Author:** ![titaniumbones](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/titaniumbones/32/3601_2.png) [@titaniumbones](https://discourse.gohugo.io/u/titaniumbones)\
**Post date:** [December 4, 2018, 4:24pm UTC](https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654/3 "2018-12-04T16:24:00Z")

</div>

Yes, thank you. It’s up on gh-pages here:  
[https://code-at-the-edge.github.io/curriculum-materials/courses/intro-workshop/01-html/](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](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!

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [December 4, 2018, 9:25pm UTC](https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654/4 "2018-12-04T21:25:05Z")

</div>

Try it this way.

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

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

```

Do this:

```nohighlight
{{ partial "rendered.html" . }}

```

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

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [October 8, 2020, 9:51pm UTC](https://discourse.gohugo.io/t/generate-iframe-source-in-template/15654/6 "2020-10-08T21:51:14Z")

</div>