How to embed an HTML page into tiddler

#1

This attachment is a zip file. Download it and replace .json with .zip. (I had to rename extension to by pass the upload restriction on this forum).

1.1.7 Introducing Data Analytics - Your data analytics certificate roadmap_zip.json (775.0 KB)

If you open this zip archive, you will see it has

  1. index.html
  2. CSS
  3. JS
  4. images

The index.html works perfectly fine in the browser.

I want to embed this index.html into a tiddler. Such that when user opens the tiddler, it will render the index.html inside the tiddler body.

#2

@talha131 sometimes you can embed the index.html or version of it in a tiddler with the rest of the files and folders in the same folder as the wiki, and get it working, I tried with the package you shared, this but it fails due to javascript needs.

However you can use an iframe instead and it works within the tiddler.
<iframe src='file:////C:\Scratch\da\1.1.7 Introducing Data Analytics - Your data analytics certificate roadmap\index.html' frameborder="0" width="1024"; height="600"></iframe>

  • Still with the file and folders in the same folder as the tiddlywiki file.
  • There can be issues about a tiddler refresh refreshing the whole embedded site.
  • Of course the iframe may be direct to an internet hosted url, copy of this site, rather than local files.
  • If you do this a lot, there is an editor toolbar button to insert the iframe code.
1 Like
#3

Thank you @TW_Tones

I had to upload the complete folder to a host. Then I was able to embed the webpage using iframe like you suggested inside a tiddler.

image
image2708×1844 243 KB

#4

Keep in mind sometimes for single page html you can store the html in a tiddler and still access the resources below without using iframe. This keeps control of this page in tiddlywiki.

#5

I"d like to embed the text of this tiddler in an HTML block. I thought I’d see the syntax like @@html, somewhere but can’t recall. the subject of this TALK is just a little to specific as “HTML page”. My question is “HTML Fragment”

have tried, Groking Tiddlywiki, but ? remains

<div class=“ftembed”>\n
<script src=“https://funtranslations.com/extensions/embed/v1/funtranslations.embed.js”>
</script>\n
<script>\n
FunTranslations.Embed.render({url: ‘/sign-language’ , translator: ‘sign-language’ });\n
</script>\n
</div>\n

In full-disclosure, I’m looking at making an ASL tiddler as I try to learn the rudiments:

  • this is all the ASL i know
  • donde esta el quarto de baño
  • Ich hĂ€tte gerne ein Bier

e.g. MyIdeaWarehouse — – Books and Ideas in; Goods shipped out.

#6

Html can be placed in the body but script tags not so. Javascript if used is placed in module tiddlers and only loaded with the wiki. Javascript needs to comply with tiddlywikis structure.

#7

Thanks. Here’s a solution: put the subject fragment in another HTML, and simply link to it.