How to import js and css into html file

sylvia · 25 Nov 2019, 06:40

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?

jsulm · 25 Nov 2019, 08:05

@sylvia said in How to import js and css into html file:

css/app.css

This is a relative path. At runtime it is relative to the directory where your executable is. Does that directory contain css and js subdirectories?

JonB · 25 Nov 2019, 08:09

@jsulm said in How to import js and css into html file:

At runtime it is relative to the directory where your executable is

You sure about this? I don't do any QML so I don't know. It you load a QWebEngine from a URL I would expect it to be relative to the URL's directory. Here I don't know, it could be relative to where the QML came from, or even the current directory? I respect your greater knowledge, is the QML compiled into the executable as a "resource" or something and that's why it is relative to executable directory?

jsulm · 25 Nov 2019, 08:26

@JonB said in How to import js and css into html file:

I respect your greater knowledge

Actually I don't have greater knowledge :-)
My QML expertice is very limited, it just looks like something relative and usually it is relative to the directory where the executable is, not sure in case of QML though.

JonB · J jsulm 25 Nov 2019, 08:09

@jsulm
I remain to be shot down, and at least you sound like you have used QML! But here it's a bit more complicated, if the user says this is being loaded by QWebEngine from QML. When I used QWebEngine from a QWidgets application, and it was from in-memory HTML not from a file, I think paths were relative to... In truth I don't know, looks like in my code I pre-processed HTML literal to load <link rel="stylesheet" href="..."> style files into the HTML literal in the first place.

Suggest the OP try relative to executable directory, but be prepared to try elsewhere if that turns out not to load the file.