htmlqmlbootstrap-5qtwebengine

how can i convert this qml.webengine app to html 5


https://imgur.com/a/5ncaedR

This is a simple little app that just loads webviews for each goggle app Created in qml using qt.webengine, but getting errors on out of date web browser I am not going to update to Qt 6 for a while so i wanted to try to covert this to html not an html expert so bear with me

I tried using navbar from bootstrap and iframes, but cannot retain login info with iframes...? i see bootstrap has an embed function how could i emebed an external website like iframe option?

<html>
<body style="text-align:left;">
 <!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="index.css">
<div class="view">
    <iframe src="#" name=viewPort width=85% height=100% scrolling=auto frameborder=0></iframe>
</div>
<!-- The sidebar -->
<div class="sidebar">
  <a href="https://mail.google.com/" target='viewPort'><i class="fa fa-solid fa-inbox"></i> Inbox</a>
  <a href="https://calendar.google.com/calendar/u/0/r" target="viewPort"><i class="fa fa-regular fa-calendar"></i> Calendar</a>
  <a href="https://contacts.google.com/" target='viewPort'><i class="fa fa-regular fa-address-card"></i> Contacts</a>
  <a href="https://voice.google.com/u/0/calls" target='viewPort'><i class="fa fa-solid fa-phone"></i> VOIP</a>
</div>
</body>
</html>

here is what i have so far https://jsfiddle.net/8k2L5oqx/ Is this even possible with html? any pointers appreciated


Solution

  • To convert your QML WebEngine app to HTML5, avoid using iframes for Google services due to security restrictions; instead, redirect users directly to the sites and consider using Bootstrap for navigation without embedding.