QML - Import external JavaScript file

Question

I can import JavaScript files which are already part of the project tree like this:

import "myFile.js" as MyFile

Is there any way to do this for external files that aren't already included in my project, ie by passing an absolute or relative path to the file on my disc?

Answer 1

For some questions that go like:

Is it possible to do something like [this...]

usually the easiest way, is to try it out.

In your question a important detail is missing:

Is the QML file in question in a qrc -file or not?

If it is, then you need to tell QML that it shall look outside the qrc. As with pictures, you do that, by prefixing it with file:/// .

A absolute path works fine here. The relative is tricky, as you need to predict from which directory you are coming. I can't tell you that.

If the QML is not in a qrc , than you will specify a relative path on the file system in any case, so no problems here. You don't even need to prepend the file:///

If you want to have it a litte more remote, try it from the internet:

import QtQuick 2.5
import QtQuick.Controls 2.0
import 'http://code.qt.io/cgit/qt/qtdeclarative.git/plain/examples/quick/demos/photoviewer/PhotoViewerCore/script/script.js' as Test

ApplicationWindow {
    id: window
    visible: true
    width: 600
    height: 600

    Button {
        text: 'Calculate Scale of an Image: 100x100px for a target size of 200px'
        onClicked: console.log('It is:', Test.calculateScale(100, 100, 200) + '!\nMagical!')
    }
}

For a more dynamic import, you can create a proxy script with no more than this content:

// proxyScript.js

function include(path) { Qt.include(path) }

Then you can use it in your QML file as this:

import QtQuick 2.0
import QtQuick.Controls 2.0
import 'proxyScript.js' as Script1
import 'proxyScript.js' as Script2

ApplicationWindow {
    Component.onCompleted {
        // Load scripts here
        var path1 = [...] // Build the absolute path of some script to load
        var path2 = [...] // Build the absolute path of another script to load
        Script1.include(path1) // Now you can access the content of the script at path1 via `Script1.functionFromPath1...`
        Script2.include(path2)
    }
    [...]
}

You can also import multiple .js -files in one proxyScript . The functions of the scripts you import however will then be in the same name space.

Of course you can also have more static proxy scripts if you want:

// staticProxyScript.js

Qt.include('file:/My/Absolute/Path/To/A/Script/That/I/Want/To/Use.js')