Simple Javascript inclusions

[TonyM]

Folks,

I understand if you have an embed snipit it should be easy to install, for example this one for a Google Forum

<iframe id="forum_embed"
  src="javascript:void(0)"
  scrolling="no"
  frameborder="0"
  width="900"
  height="700">
</iframe>
<script type="text/javascript">
  document.getElementById('forum_embed').src =
     'https://groups.google.com/forum/embed/?place=forum/tiddlywiki-by-psat'
     + '&showsearch=true&showpopout=true&showtabs=false'
     + '&parenturl=' + encodeURIComponent(window.location.href);
</script>

I understood that a tiddler containing

<script type="text/javascript">
  document.getElementById('forum_embed').src =
     'https://groups.google.com/forum/embed/?place=forum/tiddlywiki-by-psat'
     + '&showsearch=true&showpopout=true&showtabs=false'
     + '&parenturl=' + encodeURIComponent(window.location.href);
</script>

tagged $:/tags/RawMarkup would place this inside the header and register the javascript

Then visiting a tiddler containing

<iframe id="forum_embed"
  src="javascript:void(0)"
  scrolling="no"
  frameborder="0"
  width="900"
  height="700">
</iframe>

Would embed the forum, unfortunately it is an empty window

Is there any guidance you can give for me to make this instance work, and ideally any such examples so I may document it?

Thanks in Advance

Tony

[Eric Shulman]

On Sunday, February 9, 2020 at 7:00:35 PM UTC-8, TonyM wrote:

I understood that a tiddler containing

<script type="text/javascript">
  document.getElementById('forum_embed').src =
     'https://groups.google.com/forum/embed/?place=forum/tiddlywiki-by-psat'
     + '&showsearch=true&showpopout=true&showtabs=false'
     + '&parenturl=' + encodeURIComponent(window.location.href);
</script>

tagged $:/tags/RawMarkup would place this inside the header and register the javascript

Then visiting a tiddler containing

<iframe id="forum_embed"
  src="javascript:void(0)"
  scrolling="no"
  frameborder="0"
  width="900"
  height="700">
</iframe>

Would embed the forum, unfortunately it is an empty window

In this particular example, the code that is loaded via $:/tags/RawMarkup does not actually define a function to be invoked later.  Rather, it directly runs the code as soon as the document is loaded.  However, when that code is invoked, most of the TiddlyWiki core has not yet been loaded and the tiddler containing the iframe has not yet been rendered.  As such, the "forum_embed" iframe DOM element doesn't exist yet, so the document.getElementById('forum_embed') returns a null, and nothing is actually performed.

Is there any guidance you can give for me to make this instance work, and ideally any such examples so I may document it?

For this specific use-case, it is possible to bypass the RawMarkup javascript code entirely, and just move the src URL directly into the "src" attribute of the iframe declaration.

One issue with this is that the RawMarkup uses javascript to encode and append the "parenturl" parameter to the src URL.  However, as you know, you can't directly run javascript code from within a tiddler, so we need to work around that using TiddlyWiki syntax.  Fortunately, the value of "window.location.href" *is* available in TiddlyWiki by reference to the $:/info/url/full tiddler, which is initialized during the TWCore startup, and the TW filter syntax has an "encodeuri" operator that we can use.

Try this (paste into a tiddler):

<$vars parentURL={{{ [title{$:/info/url/full}encodeuri[]] }}}>
<$vars srcURL={{{ [title[https://groups.google.com/forum/embed/?place=forum/tiddlywiki&showsearch=true&showpopout=true&showtabs=false&parenturl=]addsuffix<parentURL>] }}}>
<iframe id="forum_embed" src=<<srcURL>> scrolling="no" frameborder="0" width="100%" height="700"></iframe>
</$vars>
</$vars>

Notes:

* I changed the "place" parameter from "forum/tiddlywiki-by-psat" to just "forum/tiddlywiki"... otherwise it gave me a "permission error"

* I changed the iframe width to 100% so it uses the full width of the tiddler display area

... and I tested it on http://www.tiddlywiki.com... and it showed the GoogleGroups forum within the iframe!

enjoy,

-e

[TonyM]

Thanks heaps Eric

I will test and digest this. It seems this may not be as easy as I thought to generalise and depends on your understanding of jscript to find the alternative you suggest.

I wonder if there are only a few ways to embed using such solutions such that we could identify and document the range of cases.

Thanks again
Tony