Hi Eric,
so far it does not work yet...thought I took a really small but long
page and gave it a 1000 milliseconds.
But at least it does not throw an error-message like my brute first
attempt did.
If you want to inspect the installation look here:
https://www.szen.io/Kunstgeschichte/#FlexframeTest
Best wishes Jan
Am 05.09.2020 um 02:24 schrieb Eric Shulman:
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#
<https://css-tricks.com/examples/iFrameResize/crossdomain.php#>
||
|
<scripttype="application/javascript">
functionresizeIFrameToFitContent(iFrame ){
iFrame.width =iFrame.contentWindow.document.body.scrollWidth;
iFrame.height =iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded',function(e){
variFrame =document.getElementById('iFrame1');
resizeIFrameToFitContent(iFrame );
// or, to resize all iframes:
variframes =document.querySelectorAll("iframe");
for(vari =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(){
variframes =document.querySelectorAll("iframe");
for(vari =0;i <iframes.length;i++){
iframes[i].height
=iframes[i].contentWindow.document.body.scrollHeight;
}
},100);
});
$tw.hooks.addHook("th-navigating",function(event){
setTimeout(function(){
variframes =document.querySelectorAll("iframe");
for(vari =0;i <iframes.length;i++){
iframes[i].height
=iframes[i].contentWindow.document.body.scrollHeight;
}
},100);
returnevent;
});
};
})();
|
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:
|
<iframesrc="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
<mailto: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
<https://groups.google.com/d/msgid/tiddlywiki/8ec7c9eb-3277-4594-bae7-3832547b7497o%40googlegroups.com?utm_medium=email&utm_source=footer>.
--
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/5F537075.9000504%40googlemail.com.
