Is the type "text/html" suposed to work just like an HTML file?

#1

Let’s say that I create an HTML page in a single file using HTML, Javascript and CSS. Just like this jsfiddle page https://jsfiddle.net/raylight/1um2deko/.

Well, this page works fine on my computer as an HTML file… And it works fine on jsfiddle as well. However, if I try to put this HTML code inside a tiddler with the type text/html I get the following result:

Screenshot_20211031_002645
Screenshot_20211031_0026451625×591 4.09 KB

I’d like to be able of creating some web pages inside my tiddlers. I have seen that it’s possible to set the type text/html inside a tiddler, but even though the HTML created with this type works with simple cases, it doesn’t work when I create more complex pages with javascript libraries declared in it. Is it possible to make a tiddler display the webpage from an HTML code that is inside the tiddler? Or did I get it wrong and the type text/html is not supposed to be used like that? :thinking:

1 Like
#2

G’day Rafael,

If you don’t mind a little trickery, consider using an iframe to display html+css+javascript code.

Something like Just a goofy thought: a way to get javascript into a Tiddler.

If you put the HTML code in a tiddler, say a tiddler called “Fiddle”, with the type set to text/html.

Then have another tiddler, say “Fiddle Viewer”, with the following content:

<iframe srcdoc={{Fiddle!!text}}
 style="border:none;width:100%; height:500px;">
</iframe>
1 Like
#3

Thanks for the detailed explanation!

You were right, actually using an iframe with jsfiddle worked better for my case. Since there I have syntax highlight and more specific functionalities for web development… So using:

<iframe width="100%" height="300" src="//jsfiddle.net/raylight/1um2deko/embedded/result,js,html,css/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

I got:

Screenshot_20211031_010454
Screenshot_20211031_0104541621×358 83.7 KB

#4

Good stuff !

You can definitely put any kind of HTML (well, HTML elements) and CSS in any tiddler, but not javascript.

The only advantage of embedding the HTML+CSS+javascript right in a tiddler would be for off-line viewing of that content. Or the content from the external site does not allow embedding in an iframe.

Cheers !

#5

It sounds like you’re running into the HTML sandbox protections. See here for how to turn it off:

https://tiddlywiki.com/#Hidden%20Setting%3A%20HTML%20Parser%20Sandbox

1 Like