Quantcast
Channel: QtWebEngine
Viewing all articles
Browse latest Browse all 13965

[[qanda:topic_unsolved]] How to import js and css into html file

$
0
0

Hello all,

I'm loading an html code using QTWebEngine, but it does not load the external files in the html code.

This is my index.qml file:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtWebEngine 1.0

ApplicationWindow {
id: window
visible: true
width:640
height:480
WebEngineView {
id: webEngineView
anchors.fill: parent
}
Component.onCompleted: {
var html="<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
  <base href='/'>
  <title>Markup Converter Assistant</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta property='og:image' content='conversation.svg' />
  <meta property='og:title' content='Conversation Chat Simple' />
  <meta property='og:description' content='Sample application that shows how to use the Watson Assistant API to identify user intents' />
  <link rel='shortcut icon' href='favicon.png' type='image/png'>
  <link rel='stylesheet' href='css/app.css'>
</head>

<body>
  <!-- <div id='view-change-button' class='button' onclick='PayloadPanel.togglePanel(event, this)'>
    <img class='option full' src='../img/Chat Button.png'>
    <img class='option not-full' src='../img/Code Button.png'>
  </div> -->
  <div id='contentParent' class='responsive-columns-wrapper'>
    <div id='chat-column-holder' class='responsive-column content-column'>
      <div class='chat-column'>
        <div id='scrollingChat'></div>
        <p class='user-typing' id='user-typing-field'></p>
        <label for='textInput' class='inputOutline'>
          <input id='textInput' class='input responsive-column' placeholder='Type something' type='text' onkeydown='ConversationPanel.inputKeyDown(event, this)'
            autofocus>
        </label>
       
      </div>
    </div>
    <div id='payload-column' class='fixed-column content-column'>
      <div id='payload-initial-message'>
        Type something to see the output
      </div>
      <div id='payload-request' class='payload'></div>
      <div id='payload-response' class='payload'></div>
    </div>
  </div>

  <script src='js/common.js'></script>
  <script src='js/api.js'></script>
  <script src='js/conversation.js'></script>
  <script src='js/uiActionFunctions.js'></script>
  <script src='js/payload.js'></script>
  <script src='js/global.js'></script>
  <script type='text/javascript' src='https://cdn.rawgit.com/watson-developer-cloud/watson-developer-cloud.github.io/master/analytics.js'></script>
</body>
</html>
"
webEngineView.loadHtml(html)
}
}

The html is rendering in a pop up window as I want but the scripts and stylesheet is not imported. Please what's the right way to rewrite this qml scripts so I can import and load the scripts and stylesheets?


Viewing all articles
Browse latest Browse all 13965

Trending Articles