My goal is to have a homepage with an iframe which dynamically adjusts its height to its contents, my Xojo webapp.
I think I need to add a WebPageSource to the Webpage of my app. But how exactly would I implement the following javascript?
I found this javascript online which would have to be added to the Xojo Webapp (which will be loaded in the iframe)
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
The iFrame tag would look something like this then:
<iframe src="https://www.osswald.com:8050" name="ifm" width="821" height="650"> </iframe>
I found another way to resize an iframe here:
https://github.com/davidjbradshaw/iframe-resizer
Example which comes with the source code:
http://davidjbradshaw.com/iframe-resizer/example/
But I still don’t know how to include this with my webapp.
The documentation lacks examples on how to make use of external javascript libraries, how to add css, etc.
I’m not getting yet what could be directly added to the source property of a WebPageSource in the IDE and when exactly would one use the ExecuteJavaScript method vs the EditSource Event… ?
Is there any video on this, sample application or more details in any of the various documentation sources?
Since the RB days it has become more and more difficult to find information, everything seems so cluttered and a central search is lacking.
[quote=235150:@Oliver Osswald]My goal is to have a homepage with an iframe which dynamically adjusts its height to its contents, my Xojo webapp. …/snip…
<iframe src="https://www.osswald.com:8050" name="ifm" width="821" height="650"> </iframe>
I believe the JavaScript should go in the HTML Page between . However, I have a question : do you have anything else on that HTML page ? If not, you can make the iFrame the size of the browser window with:
<iframe src="https://www.osswald.com:8050" name="ifm" width="100%" height="100%" style="overflow: scroll;" > </iframe>
The overflow:scroll is to allow the page to scroll if the webpage is bigger than the browser window.
Thank you Michel! Yes, I have other things on the webpage, this is why I use an iFrame. Otherwise I could call the webapp directly.
There is a part of the code which goes to the parent page and some script must work on the page loaded into the iFrame. So far I have not been successful with adding a script to my xojo webpage…
To add JavaScript to your app, simply place that in the HTMLHeader within tags.
I may have a look at this when I am back home.