Embedding in iframe: possibility to retain navigation and scrolling?
Hi @KajMagnus
We're upgrading SoundFlow to newest Electron version, and there the webview support is now deprecated. Long story short, we need to now embed the Talkyard forum as an iframe.
However, the forum detects we're embedding in an iframe and turns off scrolling and the navigation. By removing the s_InIframe (or something like that) class on the html element in Chrome Debugger Tools, it reappears.
Is there any way to be able to turn this iframe detection off somehow?
It would definitely we nice for some things, but it would be nice if the "navigation off" was more opt-in so you'd have to ask for it in the url.
Our process is to log in the user via SSO (so they start at our site).
- CChristian Scheuer @chrscheuer
If you make navigation opt-in then maybe something like the following in
app/views/debikiScriptsHead.scala.htmllines144+:var _isInIframe; try { _isInIframe = window.self !== window.top; } catch (e) { _isInIframe = true; } if (_isInIframe && !/[?&]embedWithNav/.test(window.location.search)) _doc.className += ' s_InIframe';
KajMagnus @KajMagnus2019-05-21 09:27:51.499ZHmm yes, setting
_isInIframe = falseseems to make navigation work in an<iframe>.
In reply tochrscheuer⬆:KajMagnus @KajMagnus2019-05-21 09:26:47.077ZHow does deep linking work in the Electron app? If someone wants to link to a specific page in the forum. Or to a specific post, on a specific page?
Link example: https://www.talkyard.io/-226#post-5 (for liinking to this post itself). If, in your Electron app, from inside the embedded forum, one clicks such a link, then that works fine I'd think. The embedded forum just opens that page and loads post nr 5. If, however, that link is in the Electron app but outside the embedded forum, then what happens if one clicks it? I'm thinking the Electron app then might want to launch an external browser? (instead of redirecting the embedded forum to the linked page)
What would you want to happen? If someone clicks [a link to something in the forum] in the Electron app (outside the forum). (Or maybe this cannot happen the way the app is designed?)
- CChristian Scheuer @chrscheuer
The Electron app has its own internal routing system that is not hosted from the web but from a virtual file system / virtual web server. We don't have deep linking in and out of the forum implemented yet, but the way it would work is that each macro/package in our app will have an online url representation, and so we'll be able to translate back/forth from those URLs if people want to embed links in the forum. When outside the forum they would link to the website, when inside, they would be translated to navigation requests within the app
The forum is primarily accessible from the web, so any automated deep link conversion is considered an add-on and navigation would primarily be from somewhere else in the app, to some place in the forum, not from the forum out.Note that it was way easier to work with this with th webview tag because it was akin to having two separate browsers and we could easily intercept any navigation request to control deep linking, but with this iframe mess I'm not sure yet how to do that.
For now I just stumbled on the missing nav as the first hurdle. If it turns out not being feasible to use iframe for whatever reason (security, navigation intercepting, unreliability) there's one last option we can try that just requires a lot more code on our part, namely embedding BrowserViews directly, which would isolate the forum in a separate process. I'm supposing they may have close to the same characteristics as embedding the webview.- KajMagnus @KajMagnus2019-05-26 10:57:34.064Z
easier to work with this with th webview tag because it was akin to having two separate browsers and we could easily intercept any navigation request to control deep linking, but with this iframe mess I'm not sure yet how to do that
Maybe there's some way to do that, by posting messages from / to the iframe. Maybe one could configure the iframe so that, if someone navigates to
//some.domain/, then, the iframe instead of going there, posts a message to the parent window, which knows how to handle contents from that domain. For example, the parent window might decide to show something completely different, with the iframe removed.- CChristian Scheuer @chrscheuer
Very good point! I'll need to test some more if that's an actual problem that needs to be addressed by TY. I think we have access to those hooks in Electron even without TY needing to do anything, but I might be wrong.
In any case we won't switch to Electron 5 before our 3.0 release, so this is not urgent.
- Progresswith handling this problem
- KajMagnus @KajMagnus2019-05-21 03:28:04.793Z
Ok I'll look into this.
Hmm Talkyard knows if a page in an iframe is for embedded comments, or if it's instead a normal forum page / topic list page, so I'd think it'll be possible to automatically know if the navigation widgets should be shown. (If not an embedded blog comments discussion, then, show navigation buttons etc).
- CChristian Scheuer @chrscheuer
Nice! This seems like the way to go then, please disregard my above attempt at amending to the code.
- KajMagnus @KajMagnus2019-05-26 10:49:24.051Z
I think I've fixed this now so that the forum will work as usual, in an iframe. Seems to work in some brief manual tests I did. (The fix is still in my work-in-progress branch, will deploy in about 1.5 weeks probably.)
I'm wondering, how do you have in mind to test that this actally works? I suppose you'll try this out in your local Electron dev env, and ... if it works on your laptop dev env, is that all that's needed, testing wise? (or can you think of something I should do, to make this simpler & safer for you to test and roll out to your users?)
- KajMagnus @KajMagnus2019-06-07 04:12:41.134Z
Now I've deployed the change that makes navigation etc load, by default, in an iframe — some time later, when you have time, feel free to try it out and let me know how it works :- )
- CChristian Scheuer @chrscheuer
Thanks @KajMagnus! Looking forward to testing this :)