javascript in text/html tiddlers?

89 views
Skip to first unread message

A Gloom

unread,
May 19, 2019, 4:46:01 AM5/19/19
to TiddlyWiki
From what I could find about the subject, you can use <script> tag in a text/html tiddler but the simple examples I seen shown (shown below) don't work in my TW-- I get the iframe but no content.  Using single file TW 5.1.17 & 5.1.19 with latest Firefox.

<script type="text/javascript">
alert("Hooray");
</script>

<script type="text/javascript">
alert("hooray!\n\n"
  + "Your username is '"
  + window.parent.$tw.wiki.getTiddlerText("$:/status/UserName") + "'\n\n" +
  + "And this wiki is called '"
  + window.parent.$tw.wiki.getTiddlerText("$:/SiteTitle")+"'");
</script>

I'm using javascript (shown below) to manipulate an external svg to display with an <object> tag -- it works if I have it in an external html that I display in an iframe but won't work in a text/html tiddler.  I'm probably dealing with multiple issues-- any hints would be greatly appreciated.

<object id="svg-object" data="stormsmuth.svg" type="image/svg+xml"></object>
<script type="text/javascript">
  window.addEventListener("load", function() {
  var svgObject = document.getElementById("svg-object").contentDocument;
  var svg = svgObject.getElementById('stormslayers1');
svg.setAttribute("viewBox", "100 100 400 400");
  var element = svgObject.getElementById("CITYLIMIT");
element.setAttribute("stroke", "#ee82ee");
element.setAttribute("stroke-width", "4px");
element.setAttribute("stroke-dasharray", "3 1 1 1 3");
  var element2 = svgObject.getElementById("sectbord");
element2.setAttribute("stroke", "pink");
element2.setAttribute("stroke-width", "2px");
element2.setAttribute("stroke-dasharray", "2 2");
  var element3 = svgObject.getElementById("sectname2");
element3.setAttribute("fill", "white");
  console.log(svg);
  });
</script>

PMario

unread,
May 19, 2019, 5:43:11 AM5/19/19
to TiddlyWiki
Hi,

script tags are sanitized by tiddlywiki, because of security risks.

-mario

TonyM

unread,
May 19, 2019, 6:22:51 AM5/19/19
to TiddlyWiki
Mario,

Is it fair to say for "A Gloom" if you want to introduce a new feature with javascript you need to move it into a plugin.

But since he/she is relatively new to TiddlyWiki rather than try and get such a solution working it would be better to ask the community what they are trying to achive and we do it the tiddlywiki way?

Tony

Jeremy Ruston

unread,
May 19, 2019, 6:42:25 AM5/19/19
to tiddl...@googlegroups.com
Hi Gloom

I’ll explain what’s going on with regard to iframe, but I don’t think it’s a viable route to solving your issue.

Text/html tiddlers are not subject to any sanitisation, but the iframe that is used to display them is given the “sandbox” attribute (see the description here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), which blocks JS by default.

However, you can easily use your own iframe to display an HTML tiddler, avoiding the sandbox attribute. For example:

<iframe src={{{ [[New Tiddler]get[text]encodeuricomponent[]addprefix[data:text/html,]] }}}/>

I tried it with the following content in “New Tiddler”:

<html><head>
<script>
console.log("How are you");
</script>
</head><body>HelloThere
</body></html>

You can see the console.log output in the browser developer console.

Now, it looks like what you’re actually trying to do is to manipulate the properties of an SVG image. If so, the easiest technique is to use an SVG embedded directly in the HTML (ie without an IMG tag). Then it is possible to manipulate all of the properties you mention using CSS. Whether or not you’ll be able to use the technique depends on how much control you’ve got over the images.

The other approach you could try is to use wikitext primitives to construct the text of the SVG image, splicing in the correct property values, and then displaying it with an IMG tag.

Best wishes

Jeremy.


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/54f781af-59a5-4755-9f0b-eccb57cdadf0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

A Gloom

unread,
May 20, 2019, 3:32:04 AM5/20/19
to TiddlyWiki
PMario, Tony, Jeremy

Thank you all for the responses : )

i saw that javascript was disabled in wikitext tiddlers but not text/html tiddlers such as discussed here: https://groups.google.com/forum/#!msg/tiddlywiki/NwOI-QER2ig/lSLS3XolwDoJ , but i couldn't get the examples cited to work--

     -   -   but now i know why-- the sandbox attribute is causing the blank display-- that also answers a previous question about displaying external websites like Google Apps (non-published doc's) and other sites like JIRA in iframes to display with a "Javascript is not enabled" message.
 
Text/html tiddlers are not subject to any sanitisation, but the iframe that is used to display them is given the “sandbox” attribute (see the description here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), which blocks JS by default.
 
However, you can easily use your own iframe to display an HTML tiddler, avoiding the sandbox attribute. For example:
<iframe src={{{ [[New Tiddler]get[text]encodeuricomponent[]addprefix[data:text/html,]] }}}/>

That example was very useful in illustrating the matter, I now have it in my testbed wiki for experimenting with.

A separate question:  tiddlers are badically <div>'s unless you set their type which can change the tiddler to a <iframe> in case of type text/html, or an <img> in case of graphic types, if i'm understanding correctly?
 
Now, it looks like what you’re actually trying to do is to manipulate the properties of an SVG image.

You are correct.  I'm using one master map svg file (kept external for editing one file rather than many separate ones) that about 400 tiddlers are going to call on and each tiddler will have its own modifications to the svg such as turning on elements, adding elements and changing viewbox (to save me from having 400 separate svg's)
 
If so, the easiest technique is to use an SVG embedded directly in the HTML (ie without an IMG tag). Then it is possible to manipulate all of the properties you mention using CSS. Whether or not you’ll be able to use the technique depends on how much control you’ve got over the images.

I control the image, its a local file in the same directory as the TW file.  I could embed the master svg into a html (updating the html when I edit the svg master), so this option with CSS I'm looking at, having the tiddlers calling on it having CSS instead of js to alter the svg.  CSS can setElements, but can it create elements that aren't there yet or use addEventListener("load" to wait for the svg to load?  More for me to research, but worth it if I can have the tiddlers contain the alteration instructions for a single master html/svg file rather than separate html files containing the js alteration instructions that I'm currently using.
 
The other approach you could try is to use wikitext primitives to construct the text of the SVG image, splicing in the correct property values, and then displaying it with an IMG tag.

That I would have to learn more about, any reference links for me to study for that approach-- that's how I learned to do the js for altering the svg-- studying some examples I found online-- they didn't apply directly so I had to experiment till I found what would work.
Reply all
Reply to author
Forward
0 new messages