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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/8ec7c9eb-3277-4594-bae7-3832547b7497o%40googlegroups.com.
