On Friday, September 4, 2020 at 2:50:16 PM UTC-7, Jan wrote: > > recently I stumbled upon a script which is able to adjust the size of an > Iframe to the content. > Because I like to work with external files like etherpads for interaction, > this would make a lot of things possible. > Here's a Demo > https://css-tricks.com/examples/iFrameResize/crossdomain.php# > > <script type="application/javascript"> function resizeIFrameToFitContent( iFrame ) { iFrame.width = iFrame.contentWindow.document.body.scrollWidth; iFrame.height = iFrame.contentWindow.document.body.scrollHeight; } window.addEventListener('DOMContentLoaded', function(e) { var iFrame = document.getElementById( 'iFrame1' ); resizeIFrameToFitContent( iFrame ); // or, to resize all iframes: var iframes = document.querySelectorAll("iframe"); for( var i = 0; i < iframes.length; i++) { resizeIFrameToFitContent( iframes[i] ); } } ); </script>
I wonder if this could be implemented to tiddlywiki. > > Two things to change > -It needs to have flexible Ids to allow multiple instances. > The first two lines from the event listener are looking for an iframe with a specific ID. The rest of the listener does the same for ALL iframes, regardless of ID. Thus, you can simply omit the first two lines and keep the rest. -width should be fixed only the height should adapt. > Just omit the "iFrame.width = ... " line from the resizeIFrameToFitContent function, so that only the height is adjusted. > What do you think, is this possible? > Normally, this kind of code would be added to the <head> section of the HTML file. To do this in TiddlyWiki, you would place the code in a tiddler tagged with $:/tags/RawMarkup and then save-and-reload so the code is inserted into the <head> of the HTML file. HOWEVER... having said all of the above... *This code, as written, will NOT work in TiddlyWiki.* The problem is that, in TiddlyWiki, any IFrame that is contained in a tiddler will not even *exist* until that tiddler is actually displayed... and at the time that the document is *loaded*, no tiddlers are displayed yet. Thus, the above code will not find any "iframe" elements to modify. To make this work in TiddlyWiki, you need to trigger the code whenever a tiddler is opened or refreshed rather than when the DOM content is loaded. Here's some EXPERIMENTAL code that uses the TiddlyWiki core "hook" mechanism instead of window.addEventListener() /*\ title: ResizeIFrame type: application/javascript module-type: startup \*/ (function(){ /*jslint node: true, browser: true */ /*global $tw: false */ "use strict"; // Export name and synchronous status exports.name = "resizeIFrame"; exports.platforms = ["browser"]; exports.after = ["startup"]; exports.synchronous = true; exports.startup = function() { $tw.hooks.addHook("th-page-refreshed",function() { setTimeout(function() { var iframes = document.querySelectorAll("iframe"); for( var i = 0; i < iframes.length; i++) { iframes[i].height = iframes[i].contentWindow.document.body. scrollHeight; } }, 100); }); $tw.hooks.addHook("th-navigating",function(event) { setTimeout(function() { var iframes = document.querySelectorAll("iframe"); for( var i = 0; i < iframes.length; i++) { iframes[i].height = iframes[i].contentWindow.document.body. scrollHeight; } }, 100); return event; }); }; })(); Notes: * Enter the code above into the text field of a tiddler (e.g., "ResizeIFrame") * Set the tiddler's type field to a value of "application/javascript" and create a "module-type" field with value of "startup" * Save-and-reload for the code to take effect. To test: * Create a tiddler containing an iframe, like this: <iframe src="somefile.html" width="100%" height="480"></iframe> * IMPORTANT NOTE: the src="..." file must be from the *same domain* as your TiddlyWiki file because, for security reasons, modern browsers do not permit "cross-domain" access to the "document" object of another file. How it works: * The code defines a "startup" function that is invoked when your TiddlyWiki file is loaded. * This code sets up two "hooks" that will be triggered in response to TWCore activities * The "th-page-refreshed" hook is triggered when the page is first displayed and whenever it is refreshed (e.g., if you edit the PageTemplate) * The "th-navigating" hook is triggered whenever you open a tiddler or follow a link to an already opened tiddler. * Each hook uses setTimeout(...) to delay it's action by 100 milliseconds. This is needed because the hooks are triggered *before* the IFrame contents are actually rendered, so we need to wait just a little bit for the Iframe to do it's thing. You might need to increase this delay depending upon the speed of your system and/or the complexity of the IFrame contents. I've tested this code on my own system by viewing a local file (actually another TiddlyWiki file!) in an IFrame, and it *SEEMS* to work. Give this a try and let me know how it goes... enjoy, -e -- 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+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8ec7c9eb-3277-4594-bae7-3832547b7497o%40googlegroups.com.